blob: 1b1b24bca4c163f0cb7e786509d827634c5e4b17 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<html>
<body onload="fillCanvas('white'); fillCanvas('purple');">
<script>
function fillCanvas(gradColor) {
var c = document.getElementById(gradColor + 'Canvas');
var ctx = c.getContext("2d");
// Create solid-color gradient, with all stops same color
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,gradColor);
grd.addColorStop(1,gradColor);
// Fill with gradient, but effectively a solid fill
ctx.fillStyle = grd;
ctx.fillRect(0,0,200,100);
}
</script>
<canvas id="whiteCanvas" width="200" height="100"></canvas>
<br>
<canvas id="purpleCanvas" width="200" height="100"></canvas>
</body>
</html>
|
