How To Fill Gradient Color On 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. 

There are two ways for creating gradient colors one is linear gradient and another radial gradient. 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


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 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.   

<script type="text/javascript">
window.onload=function() {
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>

<canvas height="200" id="canvas" width="200">
<b>Canvas Not Supported By This Browser</b>
</canvas>

Canvas Not Supported By This Browser

Creating Radial Gradient on HTML5 Canvas


You can create 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 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.
<script type="text/javascript">
window.onload=function() {
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>
<canvas height="300" id="canvas" width="300">
<b>Canvas Not Supported By This Browser</b>
</canvas>
Canvas Not Supported By This Browser
How To Fill Gradient Color On HTML5 Canvas Shapes
2017-04-16T22:38:00-07:00
Shuseel Baral
HTML5|Internet & Web Designing|Programming Tutorials|