HTML and CSS Reference
In-Depth Information
}
function canvasSupport () {
return Modernizr.canvas;
}
function canvasApp(){
if (!canvasSupport()) {
return;
}else{
var theCanvas = document.getElementById("canvas");
var context = theCanvas.getContext("2d");
}
drawScreen();
function drawScreen() {
//make changes here.
context.fillStyle = '#aaaaaa';
context.fillRect(0, 0, 200, 200);
context.fillStyle = '#000000';
context.font = '20px _sans';
context.textBaseline = 'top';
context.fillText ("Canvas!", 0, 0);
}
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="500" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
The Basic Rectangle Shape
Let's get our feet wet by looking at the single primitive, built-in geometric shape on
Canvas—the rectangle. On Canvas, basic rectangle shapes can be drawn in three dif-
ferent ways: filling, stroking, or clearing. We can also build rectangles (or any other
shape) by using paths, which we will cover in the next section.
First, let's look at the API functions used for these three operations:
fillRect(x,y,width,height)
Draws a filled rectangle at position
x
,
y
for width and height.
