HTML and CSS Reference
Radial Gradients and Text
A radial gradient is created much like a linear gradient, except that it represents a cone—
not a line. The cone is created by defining the center points and the radii of two different
circles when calling the createRadialGradient() function of the Canvas context:
var gradient = context.createRadialGradient( [x0] , [y0] , [radius0] , [x1] , [y1] , [radius1] );
Let's say you want to create a radial gradient based on a cone. It starts with a circle that
has its center point at 100,100 and a radius of 20, and ends at a circle with its center
point at 200,100 and a radius of 5. The code would look like this:
var gradient = context.createRadialGradient(100,100,20,200,100,5);
Adding color stops to a radial gradient works the same as with a linear gradient, except
the color moves along the cone instead of the line:
gradient.addColorStop(0, "#000000 ");
Image Patterns and Text
Another option for filling text on HTML5 Canvas is to use an Image object. We will
devote all of Chapter 4 to using the Image API, so here we will only discuss the basics
of how to use one as a pattern for a text fill.
To create an image pattern, call the createPattern() method of the Canvas context,
passing a reference to an Image object, and an option for repetition :
var pattern = context.createPattern( [image] , [repetition] );
A valid Image object that has been loaded with an image by setting the pattern
.src property and waiting for the image to load by setting an event listener for the
Image onload event. The Canvas specification also allows for a video element or
another <canvas> to be used here as well.
The “tiling” of the image. This can have one of four values:
The image is tiled on both the x and y axes.
The image is tiled only on the x-axis (horizontally).
The image is tiled only on the y-axis (vertically).
The image is not tiled.