HTML5 Canvas - Radial Gradient


A radial gradient starts from one smaller imaginary circle and extends along the circumference of increasingly larger circles. The createRadialGradient() method is used to create radial gradient. We define Radial gradients are defined with two imaginary circles - a starting circle and an ending circle

Let us take a look at the following example

<!DOCTYPE html5>
<html>
<body>

<canvas id ="canvas1" width="300" height="200" style="border:2px solid #FF0000;">
</canvas>

<script>
var c1=document.getElementById("canvas1");
var context1=c1.getContext("2d");

context1.beginPath();
context1.rect(50,20,180,120);
context1.lineWidth=5;
context1.strokeStyle="blue";
context1.stroke();

// add Radial gradient
var grd = context1.createRadialGradient(115,70,10, 115,70,70);
// light blue
grd.addColorStop(0, "#8ED6FF");   
// dark blue
grd.addColorStop(1, "#004CB3");
context1.fillStyle = grd;
context1.fill();

</script>

</body>
</html>



Try this example Online


Try this example online here. [ It opens in a new tab / windows, so you can come back ] and try to make some changes in the color of the start and end circles, to see how it looks like.

Congratulations !!! You have been able to draw a radial Gradient on canvas in HTML5.

Some Explanation



1. Use createRadialGradient(x,y,r,x1,y1,r1) is used to to create a gradient along to circles where

- x,y and r are the coordinates of the center and its radius for the first circle.
- x1,y1 and r1 are the coordinates of the center and its radius for the second circle.

2. The color stops along the imaginary circles are specified using addColorStop. We generally specify 2 colors, but we can specify more than one color. We do it with the following statements.
grd.addColorStop(0, "#8ED6FF");   
grd.addColorStop(1, "#004CB3");


3. Finally, the following statments define and fill the Radial gradient.

context1.fillStyle = grd;
context1.fill();