HTML and CSS Reference
In-Depth Information
this.drawStop = function(){
var width = 20,
height = 20,
x = canvas.center.x - (width / 2),
y = canvas.center.y - (height / 2);
context.beginPath();
context.fillStyle = '#A0A0A0';
context.fillRect(x, y, width, height);
};
}
As you can see, you declare the
width
and
height
of the stop icon as
20
, so that
they can be referenced later. You also calculate the x coordinate by getting the
canvas's center x coordinate minus half of the width of the rectangle. This will
center the stop icon horizontally.
Next, the y coordinate is set in much the same way, by halving the height of the
canvas (its center) and subtracting half of the stop icon's height. This then
places the stop icon in the center of the canvas vertically, as shown in Figure
7-7. Combining these two calculations will completely center the stop icon
within the canvas.
