It has a single control point (the point outside of the circle that the line curves toward) represented
by cpx, cpy. The x,y values represent the new ending point.
Chapter 6: Advanced Programming Topics: Canvas and Video
129
Figure 6-2: Drawing two triangles
??‘ bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) adds a cubic Bezier curve to the current
subpath using two control points.
Using arc() , I can create a filled circle inside of an empty circle using the following code:
function drawCircles(){
var canvas = document.getElementById(???myCanvas??™);
var context = canvas.getContext(???2d??™);
// Create filled circle
context.beginPath();
context.arc(125,65,30,0, 2*pi, 0);
context.fill();
(continued)
Chapter 6: Advanced Programming Topics: Canvas and Video
130
// Create empty circle
context.beginPath();
context.arc(125,65,35,0, 2*pi, 0);
context.stroke();
context.endPath();
}
The arc() method starts the arc shape at coordinate (125,65) and draws a 30px radius starting at 0
degrees and ending at 360 degrees at a counterclockwise path.
Figure 6-3 displays the circle shapes that are created when this script is run.
Figure 6-3: Using arc() to draw a circle
(continued)
Chapter 6: Advanced Programming Topics: Canvas and Video
131
Drawing an Image
In addition to lines and other shapes, you can also draw an image onto your canvas by using the
drawImage() method.
Pages:
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162