• Choose a category
• All
• Classic-Fiction

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 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.

To use the image pattern, apply it to the fillColor and strokeColor properties of the context, just as you would apply a color:

context.fillStyle = pattern;

or:

context.strokeStyle = pattern;

For example, to load an image named texture.jpg and apply it to the fillStyle so that it tiles on both the x and y axes, you would write code like this:

var pattern = new Image();

pattern.src = "texture.jpg"

pattern.onload = function() {

var pattern = context.createPattern("texture.jpg", "repeat");

context.fillStyle = pattern;

...

}

PATTERNS WITH VIDEO: THE BAD NEWS

The HTML5 Canvas API specifies that an HTML5 video element can be used as the source for createPattern() instead of an image. However, all of our attempts to do so emitted the following JavaScript error:

Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17

According to the DOM reference at www.gnu.org, DOM Exception 17, TYPE_MISMATCH_ERR occurs “if the type of an object is incompatible with the expected type of the parameter associated to the object.”

So it appears that most browsers have not included support for using video as the pattern for createPattern(). However, you can still load and play video on Canvas, which we will discuss in depth in Chapter 6.

Handling Gradients and Patterns in Text Arranger

Text Arranger 3.0 includes many changes that were implemented to support using gradients and image patterns with text on HTML5 Canvas. To see these changes in action, we first need to make sure that we have preloaded the texture.jpg image, which we will use for the context.createPattern() functionality. To do this, we will create a new function named eventAssetsLoaded() that we will set as the event handler for the onload event of the Image object that will hold the pattern. When that image has loaded, we will call canvasApp() in the same way we called it from eventWindowLoaded():

function eventWindowLoaded() {

var pattern = new Image();

pattern.src = "texture.jpg";

pattern.onload = eventAssetsLoaded;

}

function eventAssetsLoaded() {

canvasApp();

}

NOTE

We are not going to use the pattern variable we created in this function, as it does not have scope in the canvasApp() function. We are merely using it to make sure that the image is available before we use it.

In the canvasApp() function, we will create three variables to support this new functionality. fillType