HTML and CSS Reference
In-Depth Information
viewing space shows only positive x and y coordinates, you can also spawn shapes at neg-
ative values. The next two parameters specify the width and height in pixels.
Figure 6.5. Creating a rectangle requires four different parameters. The current figure would create a 100 x 100
pixel square at the 20-pixel
x
and
y
position. Currently, rectangles are the only universally supported basic shape
component in Canvas. To create items that are more complex, you'll need to use paths or images.
Step 4: Calculate the width of and height of rectangular bricks
To get the width for each brick, you'll need to do some calculations. Five bricks need to be
placed on a row with 2px gaps between each brick (4 gaps x 2px = 8px). These bricks need
to fit inside the
<canvas>
width of 408px that was placed in your HTML markup earlier.
Removing the gaps from the total width (408px - 8px), five bricks need to fit inside 400px.
Each brick therefore needs to be 80px (400px / 5 bricks = 80px). Following all our math
for the bricks can be frustrating; we've included a visual diagram (
figure 6.6
) to help you
out.
