HTML and CSS Reference
In-Depth Information
Figure 1-1. Hello Canvas!
my_canvas.stroke();
// draw circle
my_canvas.fill();
// fill in circle
my_canvas.closePath();
// now, draw right eye
my_canvas.beginPath();
my_canvas.arc(135, 70, 10, (Math.PI/180)*0, (Math.PI/180)*360, false);
// circle
dimensions
my_canvas.stroke();
// draw circle
my_canvas.fill();
// fill in circle
my_canvas.closePath();
// draw smile
my_canvas.lineWidth = 6;
// switch to six pixels wide for outline
my_canvas.beginPath();
my_canvas.arc(99, 120, 35, (Math.PI/180)*0, (Math.PI/180)*-180, false);
// semicircle
dimensions
my_canvas.stroke();
my_canvas.closePath();
// Smiley Speaks!
my_canvas.fillStyle = "black";
// switch to black for text fill
my_canvas.font = '20px _sans';
// use 20 pixel sans serif font
my_canvas.fillText ("Hello Canvas!", 45, 200);
// write text
}
Figure 1-1
shows the image displayed in the Safari Web browser.
Click here
to load
this example in your browser, or take a look at the
source code in GitHub
.
If the functionality of the HTML5 Canvas were limited to the display of static images,
however, its appeal would likely be quite limited. Who wants to write all that JavaScript
