getElementById(???myCanvas??™);
var context = canvas.getContext(???2d??™);
var img = new Image();
img.src = img_src;
img.onload = function() {
context.drawImage( img, 10, 10 );
}
}
Figure 6-7 shows the rendered image.
Figure 6-7: Encoded image
Chapter 6: Advanced Programming Topics: Canvas and Video
136
Adding Color and Transparency
The fillStyle and strokeStyle properties of the context object provides a way for you to set the
color, alpha value, or style of the shape or line you are drawing. (See Table 6-1 for a list of all context
properties.) If you would like to set a color value, you can use any CSS color, such as:
context.fillStyle=???#666666???;
context.strokeStyle=rgb(125,125,125);
Once you set fillStyle or strokeStyle , it becomes the default value for all new shapes in the canvas
until you reassign it.
You can also use rgba(r,g,b,a) to assign an alpha value to the shape you are filling in. The r , g , and b
parameters take an integer value between 0-255, while a is a float value between 0.0 and 1.0 (0.0 being fully
transparent, and 1.0 being fully opaque). For example, the following code draws two circles in the canvas. The
large circle has a 90 percent transparency value, while the smaller circle has a 30 percent transparency value:
function drawTransCircles() {
var canvas = document.
Pages:
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166