• Choose a category
• All
• Classic-Fiction

Shadow X:min="−100"

max="100"

step="1"

value="1"/>

Shadow Y:min="−100"

max="100"

step="1"

value="1"/>

Shadow Blur: min="1"

max="100"

step="1"

value="1" />

Shadow Color:

Finally, we need to add the event listeners and event handler functions so the HTML form elements can communicate with the canvas. See the results in Figure 3-8:

formElement = document.getElementById("shadowX");

formElement.addEventListener('change', shadowXChanged, false);

formElement = document.getElementById("shadowY");

formElement.addEventListener('change', shadowYChanged, false);

formElement = document.getElementById("shadowBlur");

formElement.addEventListener('change', shadowBlurChanged, false);

formElement = document.getElementById("shadowColor");

formElement.addEventListener('change', shadowColorChanged, false);

function shadowXChanged(e) {

var target = e.target;

shadowX = target.value;

drawScreen();

}

function shadowYChanged(e) {

var target = e.target;

shadowY = target.value;

drawScreen();

}

function shadowBlurChanged(e) {

var target = e.target;

shadowBlur = target.value;

drawScreen();

}

function shadowColorChanged(e) {

var target = e.target;

shadowColor = target.value;

drawScreen();

}

Figure 3-8. Text with global shadow applied

Text with Gradients and Patterns

We’ve already explored the fillColor and strokeColor properties of the Canvas context by setting those value to CSS-compliant colors. However, those very same properties can be set to refer to a few other objects defined in the Canvas API to create some stunning text effects. The objects are:

Linear gradient

A linear color gradient with two or more colors

Radial gradient

A circular color gradient with two or more colors

Image pattern

An Image object used as a fill pattern

Linear Gradients and Text

To create a linear gradient, make a call to the context’s createLinearGradient() method to create a Gradient object. The createLinearGradient() method accepts four parameters that all define the line of the linear gradient. The x0 and y0 parameters are the starting point of the line, and x1 andy1 represent the ending point of the line:

var gradient = context.createLinearGradient( [x0],[y0],[x1],[y1]);

For example, if you want to create a linear gradient that starts at the beginning of the text (located at 100,100), and has an endpoint that is the width of your text as displayed on the canvas, you might write the following code:

var metrics = context.measureText(message);

var textWidth = metrics.width;

var gradient = context.createLinearGradient(100, 100, textWidth, 100);

After you have created the line that represents the gradient, you need to add colors that will form the gradations of the gradient fill. This is done with the addColorStop() method, which requires two arguments: offset and color:

gradient.addColorStop([offset],[color]);

offset

This is the offset on the gradient line to start the color gradation. The entire gradient is represented by the numbers between 0.0 and 1.0. The offset will be a decimal that represents a percentage.

color

A valid CSS color in the format “#RRGGBB”.

So, if you want black to be the first color in the gradient, and then red to be the second color that starts halfway down the gradient line, you would create two calls to addColorStop():

gradient.addColorStop(0, "#000000");

gradient.addColorStop(.5, "#FF0000");

NOTE

If you fail to add colors with addColorStop(), the text will be rendered invisible.

The results are shown in Figure 3-9.

Figure 3-9. Text with linear gradient applied

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()