Radial Gradient

Canvas gradients are a way of filling shapes or strokes with color transitions.

To create a radial gradient with HTML5 Canvas, we can use the createRadialGradient(x1, y1, radius1, x2, y2, radius2) function.

Functions:

• createRadialGradient(x1, y1, radius1, x2, y2, radius2) - creates a radial gradient. Radial gradients are defined with two imaginary circles - a starting circle and an ending circle, in which the gradient starts with the start circle and moves towards the end circle.
• addColorStop(position, color) - the first parameter tells how far into the gradient area this color stop is to be placed. The second parameter is the color itself. The direction of the linear gradient moves from the starting point to the ending point of the imaginary line defined with createLinearGradient(). Color stops are placed along the imaginary line between 0 and 1, where 0 is at the starting point, and 1 is at the ending point.

Properties:

• fillStyle - specifies the color or style to use inside shapes. The default is #000 (black). Can be Color, Gradient or Pattern. In this demo we use gradient.
• strokeStyle - specifies the color or style to use for the lines around shapes. The default is #000 (black).

To Do

Try the following options:

1.  

     var gradient = ctx.createRadialGradient(300,300,0,300,300,300);
     gradient.addColorStop("0","magenta");
     gradient.addColorStop(".25","blue");
     gradient.addColorStop(".50","green");
     gradient.addColorStop(".75","yellow");
     gradient.addColorStop("1.0","red");
     ctx.fillStyle=gradient;
     ctx.fillRect(0,0,400,400);  

2. Conus

     var radialGradient = ctx.createRadialGradient(
       canvas.width/2, 0, 0,
       canvas.width/2, canvas.height + 300, 200);
     radialGradient.addColorStop(0, 'navy');
     radialGradient.addColorStop(0.2, 'pink');
     radialGradient.addColorStop(0.3, 'magenta');
     radialGradient.addColorStop(0.5, 'green');
     radialGradient.addColorStop(0.7, 'yellow');
     radialGradient.addColorStop(1, 'red');
     ctx.fillStyle = radialGradient;
     ctx.fillRect(0, 0, canvas.width, canvas.height);