Canvas for Publishers - HTML5 for Publishers - page 2

endPath()
End a line drawing that was started with beginPath() .
arc( x , y , arc_radius , angle_radians_beg , angle_radians_end )
Specify an arc, where ( x , y ) is the center of the circle encompassing the arc,
arc_radius is the radius of this circle, and angle_radians_beg and angle_radi
ans_end indicate the beginning and end of the arc angle in radians.
stroke()
Draw the border of the path specified within beginPath() / endPath() . Note : If you
don't include the stroke() call, your path will not appear on the canvas.
fill()
Fill in the path specified within beginPath() / endPath() .
fillText( your_text , x 1 , y 1 )
Add text to the canvas, starting at the point ( x 1 , y 1 ).
We'll also use the following attributes in conjunction with these properties to specify
colors and styles:
lineWidth
Width of the border of your bath
strokeStyle
Color of the border of your path
fillStyle
Color of the fill (interior) of your path
font
Font and size of your text
And here's the code that puts it all together:
function drawPicture() {
my_canvas.strokeRect(0,0,200,225) // to start, draw a border around the canvas
//draw face
my_canvas.beginPath();
my_canvas.arc(100, 100, 75, (Math.PI/180)*0, (Math.PI/180)*360, false); // circle
dimensions
my_canvas.strokeStyle = "black"; // circle outline is black
my_canvas.lineWidth = 3; // outline is three pixels wide
my_canvas.fillStyle = "yellow"; // fill circle with yellow
my_canvas.stroke(); // draw circle
my_canvas.fill(); // fill in circle
my_canvas.closePath();
// now, draw left eye
my_canvas.fillStyle = "black"; // switch to black for the fill
my_canvas.beginPath();
my_canvas.arc(65, 70, 10, (Math.PI/180)*0, (Math.PI/180)*360, false); // circle
dimensions