How To Fill The Gradient Color On The HTML5 Canvas Shapes

In the previous post, you have learned about drawing shapes with HTML5 canvas. You have also learned how to fill CSS colors on the shapes by setting the fill color property. Along with the CSS color values, you can also set the fill color to a gradient object. In this tutorial, you will learn how to fill the gradient color on the HTML5 canvas.

There are two ways for creating gradient colors one is linear gradient and another radial gradient. The linear gradient can be created using context.createLinearGradient() function and radial gradient can be created using context.createRadialGradient() function.

Creating Linear Gradient on HTML5 Canvas

The linear gradient can be created using the create linear-gradient (x1, y1, x2, y2) method where x1, y1 is the starting point and x2, y2 is the ending point of a linear gradient. Here the gradient color is positioned at 10, 10, and set to go 200 pixels in both directions.

var lgc = context.createLinearGradient(10,10,200,200);

Now, the gradient colors are added using the addColorStop() method, which specifies a color and offset position in the gradient where the color should occur. The offset value lies between 0 and 1.

lgc.addColorStop(0, "#00aaff");
lgc.addColorStop(0.5, "#aaff00");
lgc.addColorStop(1, "#ff00aa");

Following is a complete code followed by a visual preview, which draws a rectangle along with filling the gradient colors. Here the fillcolor is set to the gradient color using context.fillStyle=lgc; which are added using addColorStop() method.

<canvas height="200" id="canvas" width="200"> <b>Canvas Not Supported By This Browser</b> </canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var lgc=context.createLinearGradient(10, 10, 200, 200);
lgc.addColorStop(0, "#00aaff");
lgc.addColorStop(0.5, "#aaff00");
lgc.addColorStop(1, "#ff00aa");
context.fillStyle=lgc;
context.beginPath();
context.rect(10,10,200,200);
context.fill();
</script>

Preview:

Canvas Not Supported By This Browser

Creating Radial Gradient on HTML5 Canvas

You can create a radial gradient using createRadialGradient(x1, y1, r1, x2, y2, r2) method which sets the position and radius of two circles to give the gradient color. Here the gradient color is positioned at 150, 150, and set to go 40 and 100 pixels from the center in two circles.

var rgc=context2.createRadialGradient(150, 150,100,150,150,40);

Now, the gradient colors are added using the addColorStop() method,
which specifies a color and offset position in the gradient where the
color should occur. The offset value lies between 0 and 1.

rgc.addColorStop(0, "#ffaaff");
rgc.addColorStop(0.8, "#aaffff");
rgc.addColorStop(1, "#ff00af");

Following is a complete code followed by a visual preview, which creates a simple radial gradient color that will be applied to a circle using the value of context.createRadialGradient() method to fill style property.

<canvas height="300" id="canvas" width="300">
<b>Canvas Not Supported By This Browser</b>
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var rgc=context.createRadialGradient(150, 150,100,150,150,40);
rgc.addColorStop(0, "#ffaaff");
rgc.addColorStop(0.8, "#aaffff");
rgc.addColorStop(1, "#ff00af");
context.fillStyle=rgc;
context.beginPath();
context.arc(150,150,100,0,Math.PI*2,true);
context.fill();
</script>

Preview:

Canvas Not Supported By This Browser