fillRect(0,0,250,250);
}
The createRadialGradient() defines two circles, one with a 10px radius and the second with a 35px
radius. Three color stops are added using addColorStop() , and then the rg radialGradient object is
assigned to the fillStyle property. See Figure 6-10 .
Figure 6-10: Creating a radial gradient
Chapter 6: Advanced Programming Topics: Canvas and Video
140
Creating an Image Pattern
You can use an external image to create an image pattern on the back of a canvas element using the
createPattern() method. The syntax is:
patternObject = context.createPattern(image, type)
The image argument references an Image object or else a different canvas element. The type argument
is one of the familiar CSS pattern types: repeat , repeat-x , repeat-y , and no-repeat . The method
returns a Pattern object, as shown in the following example:
function drawPattern(){
var canvas = document.getElementById(???myCanvas??™);
var context = canvas.getContext(???2d??™);
var pImg = new Image();
pImg.src = ???images/tech.jpg??™;
// call when image is fully loaded
pImg.onload = function() {
var pat = context.createPattern(pImg,??™repeat??™);
context.fillStyle = pat;
context.fillRect(0,0,300,300)
}
}
In this code, an Image object is created and assigned a source.
Pages:
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170