HTML and CSS Reference
In-Depth Information
var myRectangle = canvas.getContext('2d');
myRectangle.fillRect(15,15,100,100);
}
}
</script>
<style type=”text/css”>
canvas { border: 1px solid black; }
</style>
</head>
<body onload=”draw();”>
<canvas id=”myCanvas” width=”150”
height=”150”></canvas>
</body>
</html>
The code describing the rectangle must be placed in the
SCRIPT section of your HTML page. Below you will see that a vari-
able called myRectangle is declared on line 6. Line 7 describes
what the variable myRectangle will look like. The CANVAS ele-
ment in the HTML body illustrates where the rectangle will be
drawn.
There are three different types of rectangle primitive you can
draw. The previous example demonstrates how to use the fillRect
shape. You can also draw clearRect and strokeRect.
• clearRectdrawsatransparentrectangleonthescreen.
• strokeRectdrawsonlytheoutlineoftherectangleonthe
screen.
Following is how you write the JavaScript describing how to
draw the three different rectangle primitives.
myRectangle.fillRect(15,15,100,100);
myRectangle.clearRect(20,20,60,60);
myRectangle.strokeRect(25,25,50,50);
All three rectangles can be combined with JavaScript and pre-
sented within your web page, as follows.
<html>
<head>
<title>Basic Canvas Drawing</title>
<script>
function draw(){
var canvas = document.getElementById('myCanvas');
if (canvas.getContext){
var myRectangle = canvas.getContext('2d');
myRectangle.fillRect(15,15,100,100);
myRectangle.clearRect(20,20,60,60);
myRectangle.strokeRect(25,25,50,50);
Search WWH ::




Custom Search