Implement and manipulate document structures and objects - Programming in HTML5 with JavaScript and CSS3 - page 48

FIGURE 1-33 A custom path drawn on the canvas

Although this is still a simple example, you can get creative and put together images quite
nicely. Depending on your math skills, you can create some very complex graphics using
these methods.
Next, look at the other methods that exist for drawing shapes.

Using the rect method
Earlier, you saw how to draw circles using the arc method. And as you saw in the previous
section, you can draw custom shapes of any sort and size by using the beginPath method and
stringing together a series of drawing methods. But you don't always need to do that; some
shapes are built in. In this section, you look at the built-in functionality to build rectangles.
Then you look at the functionality to fill your drawn shapes with colors and patterns. The
context object to which you have a reference has a method called rect . The rect method takes
the parameters listed in Table 1-11.

TABLE 1-11 Parameters required for drawing rectangles

Parameter Description

x , y

The x-coordinate and y-coordinate define the starting position of the rectangle. This is
the top-left corner of the rectangle.

This defines the width of the rectangle.

width

This defines the height of the rectangle. height

A simple call to the rect method, as in the following code, draws a rectangle:

ctxt.beginPath();
ctxt.rect(300, 200, 150, 75);
ctxt.stroke();

This code draws a rectangle as shown in Figure 1-34.