How to draw a circular gradient in HTML5?

HTMLWeb DevelopmentFront End Technology

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
x0
x-coordinate- Starting point of the gradient
2
y0
y- coordinate - Starting point of the gradient
3
r0
Radius of the starting circle
4
x1
x-coordinate - Ending point of the gradient
5
y1
y- coordinate - Ending point of the gradient
6
r1
Radius 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>
raja
Published on 24-Jan-2018 13:12:42
Advertisements