HTML and CSS Reference
In-Depth Information
in the frown example, will “finish off” the arc. The complete code is
<html>
<head>
<title>Frown</title>
<script type="text/javascript">
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, true);
ctx.closePath();
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>
This produces the screen show in Figure 2-8.
Figure 2-8.
The frown becomes a half-circle by adding
ctx.closePath();
before
ctx.stroke();
The
closePath
command is not always necessary, but its good practice to include it. Experiment here
and also look ahead to the drawing of the slingshot in Chapter 5 and the drawing of the hangman figure in
Chapter 9. If you want the path filled in, you use
ctx.fill()
in place of
ctx.stroke()
, which produces a
black, filled-in shape as shown in Figure 2-9. The complete code is
<html>
<head>
