Radial Gradients in Canvas: HTML5

Lets see how radial gradients are drawn on canvas using HTML5.

For Radial Gradients, we take 2 circles, one is the interior to the other. Thus, one circle is bigger than the other.

index.html and myStyle.css file content are same as Linear Gradients in Canvas: HTML5

JavaScript file: Radial Gradient
myScript.js

  var rdl              = context.createRadialGradient(125, 125, 50, 125, 125, 100);
  rdl.addColorStop(0.0, "#f00");  // RED
  rdl.addColorStop(0.5, "#00f");  // BLUE
  rdl.addColorStop(1.0, "#0f0");  // GREEN

                context.beginPath();
  context.fillStyle    = rdl;
  context.arc(125, 125, 100, 0, 2 * Math.PI);
  context.fill();

We make use of createRadialGradient method and draw 2 circles at 125px x-axis and 125px y-axis as center. With radius of 50 and 100 each. i.e., First circle is inside the second circle.
Now using addColorStop we add different colors at different points.

addColorStop() takes 2 parameter, first being the position and the next being any valid css color string.

The value of position can range from 0.0 to 1.0

at point 0% we take red – #f00
at point 50% we take blue – #00f
at point 100% we take green – #0f0

Radial Gradients in Canvas: HTML5

We assign the radial gradient object rdl to the fillStyle of circle present on canvas.

JavaScript file: Full Code
myScript.js

window.onload = canvas;

function canvas()
{
 var myCanvas = document.getElementById("myCanvas");
 
 if( myCanvas && myCanvas.getContext("2d") ) 
 {
  var context         = myCanvas.getContext("2d");
  
  var rdl                = context.createRadialGradient(125, 125, 50, 125, 125, 100);
  rdl.addColorStop(0.0, "#f00");  // RED
  rdl.addColorStop(0.5, "#00f");  // BLUE
  rdl.addColorStop(1.0, "#0f0");  // GREEN
  
  context.shadowColor     = "#000";   // BLACK
  context.shadowBlur      = 10;
  
  context.beginPath();
  context.lineWidth       = 2;
  context.strokeStyle     = "pink";
  context.fillStyle       = rdl;
  context.arc(125, 125, 100, 0, 2 * Math.PI);
  context.stroke();
  context.fill();
 }
}

We add shadow to the circle and stroke it with pink color border.

Note: We change the gradient radially by changing the center point of the inner circle.