Radial Gradients in Canvas: HTML5

Advertisement:

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

radial-Gradients-canvas-html5-technotip

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

1
2
3
4
5
6
7
8
9
		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


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=DfbA1h36MDw [Watch the Video In Full Screen.]



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

JavaScript file: Full Code
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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.

Advertisements

Leave a Reply

Your email address will not be published. Required fields are marked *