HTML and CSS Reference
In-Depth Information
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 ");
gradient.addColorStop(.5, "#FF0000");
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]
);
image
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.
repetition
The “tiling” of the image. This can have one of four values:
repeat
The image is tiled on both the x and y axes.
repeat-x
The image is tiled only on the x-axis (horizontally).
repeat-y
The image is tiled only on the y-axis (vertically).
no-repeat
The image is not tiled.
