createLinearGradient Property
In this example, We’ve created two different gradients. In the first, We create the background gradient. As you can see, W’ve assigned two colors at the same position. You do this to make very sharp color transitions – in this case from white to green. Normally, it doesn’t matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won’t be a problem.
In the second gradient, We didn’t assign the starting color (at position 0.0) since it wasn’t strictly necessary. Assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.
As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.
Example
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas tutorial</title>
<script>
function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
// Create gradients
var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(0.5, '#26C000');
lingrad.addColorStop(1, '#fff');
var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
lingrad2.addColorStop(0.5, '#000');
lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
// assign gradients to fill and stroke styles
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad2;
// draw shapes
ctx.fillRect(10, 10, 130, 130);
ctx.strokeRect(50, 50, 50, 50);
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="200" height="200">
</canvas>
</body>
</html>
