HTML5 Canvas Gradient

Another method allows you fill your bitmap images with a color gradient. The canvas API includes a linear and a radial gradient. We will look at how to create a linear gradient with the createLinearGradinet() method

The createLinearGradinet() method defines the starting point and the end point of the line for the linear gradient.

In the example we will place a gradient along the diagonal of the rectangle.

Here is our script

<script>
window.onload = function() {
var canvas=document.getElementById("drawing"); // grabs the canvas element
var context=canvas.getContext("2d"); // returns the 2d context object
var grd=context.createLinearGradient(20,10,220,160); // sets the x,y of the start and end point
grd.addColorStop(0, "#f55b5b"); // sets the first color
grd.addColorStop(1, "#3112a3"); // sets the second color
context.fillStyle=grd;
context.fillRect(20,10,200,150);
}
</script>