Dice Game - The Essential Guide to HTML5 - page 31

canvas, this goes by the name origin or registration point . The origin is the upper left corner of the canvas
element. Note that in Chapter 6, when we describe the quiz show by creating and positioning elements in
the HTML document and not in a canvas element, the coordinate system is similar. The origin is still the
upper left corner of the window.
This is different from what you may recall from analytical geometry or from making graphs. The horizontal
numbers increase in value moving from left to right. The vertical numbers increase in value moving down
the screen. The standard way to write coordinates is to put the horizontal value first, followed by the
vertical value. In some situations, the horizontal value is referred to as the x value and the vertical, the y
value. In other situations, the horizontal value is the left (think of it as from the left) and the vertical value
is the top (think of it as from the top).
Figure 2-5 shows the layout of a browser window 900 pixels wide by 600 high. The numbers indicate the
coordinate values of the corners and the middle.
Figure 2-5. Coordinate system for browser window.
Now well look at several statements for drawing, and then put them together to draw simple shapes (see
Figures 2-6 through 2-10). After that well see how to draw the dots and rectangles to represent die faces.
Heres the HTML5 JavaScript code for drawing a rectangle:
ctx.strokeRect(100,50,200,300);
This draws a hollow rectangle, with its top left corner 100 pixels from the left side and 50 pixels down from
the top. The rectangle has width 200, and height 300. This statement would use whatever the current
settings are for line width and for color.
The next piece of code demonstrates setting the line width to 5 and the color of the stroke, that is, the
outline to the indicated RGB value, namely red. The rectangle is drawn using the values in the variables x,
y, w, and h .
ctx.lineWidth = 5;
ctx.strokeStyle = "rgb(255,0,0)";
ctx.strokeRect(x,y,w,h);