HTML and CSS Reference
In-Depth Information
Here are some examples, with the complete code, for you to create (using TextPad or TextWrangler) and
then vary to test your understanding. The first one draws an arc, representing a smile.
<html>
<head>
<title>Smile</title>
<script>
function init() {
var ctx =document.getElementById("canvas").getContext('2d');
ctx.beginPath();
ctx.strokeStyle = "rgb(200,0,0)";
ctx.arc(200, 200,50,0,Math.PI, false);
ctx.stroke();
}
</script>
</head>
<body>
<body onLoad="init();">
<canvas id="canvas" width="400" height="300">
Your browser doesn't support the HTML5 element canvas.
</canvas>
</body>
</html>
Figure 2-6 shows a portion of the screen with the arc produced by this code.
Figure 2-6.
The “smile” produced by the expression
ctx.arc(200,200,50,0,Math.PI, false)
;
You can look ahead to Figures 2-11, 2-12 and 2-13 in which I captured more of the screen to see the
positioning of the drawing. Please vary the numbers in your own example so you can gain an
understanding of how the coordinate system works and how big a pixel actually is.
Before going on to see a frown, try making the arc wider or taller or changing the color. Then try moving the
whole arc up, down, left, and right. Hint: you need to change the line
ctx.arc(200, 200,50,0,Math.PI, false);
Change the
200,200
to reset the center of the circle and the
50
to change the radius.
