HTML and CSS Reference
In-Depth Information
<title>Smile</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, false);
ctx.closePath();
ctx.fill();
}
</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>
Black is the default color.
Figure 2-9.
Filling in the half circle using
ctx.fill()
If you want a shape to be filled and have a distinct outline, you use both the
fill
and the
stroke
commands and specify different colors using the
fillStyle
and
strokeStyle
properties. The color
scheme is based on the same red/green/blue codes introduced in Chapter 1. You can experiment or use a
tool such as Photoshop or Paint Shop Pro to get the colors you want. Here is the complete code:
<html>
<head>
<title>Smile</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, false);
ctx.fillStyle = "rgb(200,0,200)";
ctx.closePath();
ctx.fill();
ctx.strokeStyle="rgb(255,0,0)";
