Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 1: Drawing by using the element CHAPTER 12 473

addColorStops(gradient);

ctx.strokeStyle = gradient;

ctx.strokeRect(10, 0 * (height + offset), width, height);

ctx.strokeRect(100, 1 * (height + offset), width, height);

y1 = 300;

gradient = ctx.createLinearGradient(x0, y0, x1, y1);

addColorStops(gradient);

ctx.strokeStyle = gradient;

ctx.strokeRect(10, 2 * (height + offset), width, height);

ctx.strokeRect(100, 3 * (height + offset), width, height);

x0 = x1 = width / 2;

y0 = y1 = 4 * (height + offset) + (height / 2);

gradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

addColorStops(gradient);

ctx.strokeStyle = gradient;

ctx.strokeRect(10, 4 * (height + offset), width, height);

ctx.strokeRect(100, 5 * (height + offset), width, height);

y0 = 5 * (height + offset) + (height / 2);

y1 = y0 + 100;

gradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

addColorStops(gradient);

ctx.strokeStyle = gradient;

ctx.strokeRect(10, 6 * (height + offset), width, height);

ctx.strokeRect(100, 7 * (height + offset), width, height);

}

This example is a modified version of the drawGradient function that was presented as an

example of the fillStyle property. The addColorStops function is also defined in that example.

The result is shown in Figure 12-8.