HTML and CSS Reference
In-Depth Information
}
}
</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>
See Figure 3.30 for how the rectangles appear. All other drawings
are created from paths you must describe.
Figure 3.30
There are three
different types of rectangle
primitive you can draw using the
CANVAS element.
Drawing Simple Shapes
Shapes are described in JavaScript and presented in the
CANVAS element. The structure for describing a shape takes the
following basic methods:
• beginPath
• moveTo
• closePath
• fill
The role of the beginPath method is to declare the start of the
shape. Following the beginPath method is where you start draw-
ing your shape. The moveTo method is used to describe that
you have moved your virtual pen and are starting to draw a new
shape. Following the moveTo method is where you describe the
structure of the shape. The following code demonstrates how a
triangle is started and drawn.
myShape.beginPath();
myShape.moveTo(750,500);
myShape.lineTo(1000,750);
myShape.lineTo(1000,250);
The first line declares the start of the shape. The second line is
the moveTo method stating that the drawing will start at 750 pix-
els from the left (X axis) and down 500 pixels (Y axis).
The triangle itself is a closed shape. By default you do not need
to use the closePath method. You use the closePath method to
close a shape when it is not clear where the closure for the shape
is.
Figure 3.31
A simple triangle is
drawn using the CANVAS element.
The final method is the fill method. Together, the code looks as
follows, and Figure 3.31 shows the end result.
