However, before this image can be used in
the pattern, you need to ensure it is loaded. Therefore, you place the rest of the drawing code inside of the
Image object??™s onload event handler. Much like the gradient examples shown earlier, the Pattern object
that is created with createPattern() is then assigned to fillStyle . Figure 6-11 shows the results.
Adding Shadows
The context object provides four properties that you can use for defining shadows on the canvas:
??‘ shadowColor defines the CSS color of the shadow.
??‘ shadowBlur specifies the width of the shadow blur.
??‘ shadowOffsetX defines the horizontal offset of the shadow.
??‘ shadowOffsetY specifies the vertical offset of the shadow.
The following code uses these properties to define a blurred shadow for an image:
function drawImg(){
var canvas = document.getElementById(???myCanvas??™);
var context = canvas.getContext(???2d??™);
Chapter 6: Advanced Programming Topics: Canvas and Video
141
context.shadowColor = ???black???;
context.shadowBlur = ???10???;
context.shadowOffsetX = ???5???;
context.shadowOffsetY = ???5???;
var img3 = new Image();
img3.src = ???images/nola.jpg??™;
img3.onload = function() {
context.drawImage( img3, 20, 30 );
}
}
Figure 6-11: An image pattern drawn on a canvas
Chapter 6: Advanced Programming Topics: Canvas and Video
142
Figure 6-12 shows the result.
Pages:
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171