Radial gradient in HTML5

The another type of the gradient is Radial gradient that is based on the circles. We create a radial gradient by using a JavaScript method createRadialGradient(). This method requires the information about the two circle as follows:

var grad = ctx.createRadialGradient(x, y, r, x1, y1, rad1);
The x,y will be the center point of the one circle with radian r and x1,y1 will be the center points of the second circle with radian r1.

Similarly linear gradient we also need to use the more tahn one color stops to show the gradient effect .

grad.addColorStop(0, 'white');
grad.addColorStop(1, 'black');

The addColorStop specifies the color and the position in a CanvasGradient object that is vary between 0 to 1. We can use the several colors and position with the gradient to change a gradient.
 


Radial gradient in html5 canvas

 
The following code example creates a radial gradient.
 

<html>
<head>
  <title>Draw Arc</title>
    <style type="text/css">
        #MyCanvas {border:1px solid black;}
    </style>
  <script type="text/javascript">
      function drawGradient() {
          var ctx;
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              ctx = canvas.getContext("2d");
 
              var grad = ctx.createRadialGradient(50, 40, 3, 50, 50, 50);
              grad.addColorStop(0, 'white');
              grad.addColorStop(1, '#1616C0');
              ctx.fillStyle = grad;
              ctx.arc(50, 50, 50, 0, 2 * Math.PI);
              ctx.fill();
          }
      }
  </script>
</head>
<body onload="drawGradient();">
  <canvas id="MyCanvas" width="400" height="200">
  This browser or document mode doesn't support canvas object</canvas>
 </body>
</html>

 
We can also use the same center points for both circles.