Introduction to Radial Gradients

Learn to Create Radial Gradients with HTML5

Visual Effects Radial Gradients Fireball

Introduction

This tutorial introduces the basic concepts required to generate radial gradients with HTML5 and JavaScript. This article explains how to create radial gradients with the 2D context method, createRadialGradient(). This tutorial demonstrates how to add color stops with method addColorStop().

Obtain a 2D Context

First declare an HTML5 canvas element on your Web page.

<canvas 
 id="cv" 
 width="512" 
 height="512" 
>

Your browser doesn't 
support the canvas element.

</canvas>

Second retrieve a reference to the canvas 2D context. The following short listing demonstrates obtaining a two dimensional context from the HTML5 canvas element.

canvas = document.getElementById(
 'cv'
);
ctx = canvas.getContext(
 '2d'
);

Create a Radial Gradient

Third create a radial gradient with the 2D context's createRadialGradient() method. The parameters to createRadialGradient() define two circles. The first set of parameters define the inner circle and the second set of parameters define the outer circle. The inner circle is the starting circle for the gradient. The outer circle is the ending circle for the gradient. The first set of parameters declare the inner circle's radius, X and Y coordinates. The second set of parameters declare the outer circle's radius, X and Y coordinates. Declare each circle with a radius, and center point composed of X and Y coordinates. The following listing demonstrates creating a radial gradient.

gradCircle = 
ctx.createRadialGradient(
 innerCircleX,
 innerCircleY,
 innerRadius,

 outerCircleX,
 outerCircleY,
 outerRadius
);	

Color Stops

Add colors to the radial gradient with method addColorStop(). The RadialGradient class defines method addColorStop(). The parameters to addColorStop() include the position within the gradient for the color and the color itself.

Values range from 0 to 1 for the position parameter. Position 0 places the color at the origin of the circle. Position 1 places the color at the outer edge of the circle. For example position 0.5 places the color between the origin and the outer edge of the circle.

The following listing demonstrates creating a circle with red at the center and black along the perimeter. Colors gradually change from red to black within the circle.

	
gradCircle.addColorStop(
 0,
 "red"
);
	
gradCircle.addColorStop(
 1,
 "black"
);

You can declare radial gradient colors in a number of ways. Web safe color names, such as red, or blue, work fine. Acceptable color declaration syntax also includes hexadecimal colors such as #883900, rgb colors declared with rgb(0,0,255), and rgba colors declared with rgba(0,0,255,0.5). The last parameter in the rgba format represents alpha transparency. For example rgba(0,0,255,0.5) declares a 100% blue color. Yet the alpha value 0.5 allows 50% of the background to show through.

However hexadecimal color notation with alpha transparency is not acceptable. For example #88390088, generates an error. See the following JavaScript listing for examples which create acceptable color stops.

gradCircle.addColorStop(
 0, 
 "orange"
);	

gradCircle.addColorStop(
 0.25,
 'rgb(0,0,255)'
);	

gradCircle.addColorStop(
 0.75,
 'rgba(0,0,255,0.5)'
);	

gradCircle.addColorStop(
 1,
 "#00ffff"
);

Tips

Radial gradient colors with alpha transparency offer almost limitless possibilities. Try different circle positions, colors, stop positions, and alpha values, for a variety of effects. See the Radial Gradient Special Effects tutorial for more ideas.

Consider assigning a set of radial gradients with different alpha values per gradient. The following line of code adds a color stop for the perimeter of a radial gradient's circle. The color's blue, with 50% transparency or 0.5 alpha.

Optionally assign one alpha setting for all gradients. The following line of code renders all colors with 60% opacity (40% transparency). For example render a solid red radial gradient over a white background. Forty percent of the white background shows through the red. Overlap multiple colors covering different areas for unique combinations.

Consider global composite operations combined with global alpha. The following images demonstrate global composite operations with source over and xor with alpha settings 0.2 and 0.6. Follow the image links. Select global composite operations from the drop down menu for animated examples. Input alpha settings between 1.0 and 0.1.

Summary

This tutorial introduced the basic concepts required to generate radial gradients with HTML5 and JavaScript. This article explained how to create radial gradients with method createRadialGradient(). This tutorial demonstrated how to add color stops with method addColorStop().

Web Development Company

Seven Thunder Software's Web programming skills include HTML5, CSS3, JavaScript, WebGL, GLSL and some PHP with MySQL and Python 3. Web design skills include Web graphics with Photoshop, animation with After Effects and 3ds Max.

Tags