HTML and CSS Reference
In-Depth Information
Listing 4-17.
Drawing a Radial Gradient
var canvas = $("#MyCanvas").get(0);
var context = canvas.getContext("2d");
var radialGradient = context.createRadialGradient(100, 100, 5,100, 100,100);
radialGradient.addColorStop(0, "blue");
radialGradient.addColorStop(0.5, "green");
radialGradient.addColorStop(1, "red");
context.fillStyle = radialGradient;
context.fillRect(0, 0, 200, 200);
As you can see, the
createRadialGradient()
method takes six parameters. The first three represent the
coordinates of the start circle (100,100) and its radius (5). The next three indicate the coordinates of the
end circle (100,100) and its radius (100). Figure 4-20 shows the resulting rectangle.
Figure 4-20.
Radial gradient
The gradient starts out blue, then turns green, and then changes to red due to color stop values of
0
,
0.5
, and
1
.
Pattern Filling
Pattern filling involves filling a shape with an image, typically repeated across x, y, or both axes. In order to
use pattern filling, you use the drawing context's
createPattern()
method and then set the
fillStyle
property to the newly created pattern. Listing 4-18 shows how you create a pattern.
Listing 4-18.
Creating and Filling a Pattern
var canvas = $("#MyCanvas").get(0);
var context = canvas.getContext("2d");
var img = new Image();
$(img).load(function () {
