How to draw a circular gradient in HTML5?

This method returns a CanvasGradient object that represents a radial gradient that paints along the cone given by the circles represented by the arguments. The first three arguments define a circle with coordinates (x1,y1) and radius r1 and the second a circle with coordinates (x2,y2) and radius r2.

createRadialGradient(x0, y0, r0, x1, y1, r1)

Here are the parameter values of the createRadialGradient() method −

S.No	Parameter & Description
1	x0x-coordinate- Starting point of the gradient
2	y0y- coordinate - Starting point of the gradient
3	r0Radius of the starting circle
4	x1x-coordinate - Ending point of the gradient
5	y1y- coordinate - Ending point of the gradient
6	r1Radius of the ending circle

You can try to run the following code to learn how to draw a radial/circular gradient in HTML5 −

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Radial Gradient</title>
   </head>

   <body>
      <canvas id="newCanvas" width="450" height="250" style="border:1px solid
         #d3d3d3;"></canvas>
      <script>
         var c = document.getElementById("newCanvas");
         var ctxt = c.getContext("2d");
         var linegrd = ctxt.createRadialGradient(75, 50, 5, 90, 60, 100);
         linegrd.addColorStop(0, "#FFFFFF");
         linegrd.addColorStop(1, "#66CC00");
         ctxt.fillStyle = linegrd;
         ctxt.fillRect(20, 10, 200, 150);
      </script>
   </body>
</html>