Animated Effects

Introduction to Radial Gradients

Learn to Create Radial Gradients with HTML5

Radial Gradient Effects Example Introduction Obtain a 2D Context Create a Radial Gradient Color Stops Tips Summary HTML Markup JavaScript CSS Source Code Page

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 createRadialGradient() method. This tutorial demonstrates how to add color stops with the addColorStop() method. The examples below were created with radial gradients.

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"
);
	

Colors for radial gradients can be declared 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. See the radial gradient examples below.

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 the createRadialGradient() method. This tutorial demonstrated how to add color stops with the addColorStop() method. The examples below were created with radial gradients.

Have fun and love learning!

Visual Effects with Gradients

Sprite Sheet Animation
Copyright © 2015 Seven Thunder Software. All Rights Reserved.