Game Development Reference
In-Depth Information
The border was added in order to make the canvas somewhat visible to us, as by default, the can-
vas is transparent.
You will observe that the CSS rule is indeed applied to the canvas element, even
though the canvas' real size is still the default 300 x 150 pixels. If we were to draw
a circle in the middle of that canvas, the circle would seem distorted, because the
actual coordinate space where the circle is actually drawn, would be stretched by the
styling applied to the canvas.
clearRect
The first drawing function we'll look at is
clearRect
. All that this function does is,
clear a rectangular area of the canvas. This function is called on the context object,
as do all drawing calls that we'll be making on the 2D canvas. The four parameters
it takes, represent, in order, the x and y offset from the canvas' origin, plus a width
and a height distance to clear. Keep in mind that unlike other popular drawing APIs
in other programming languages, the last two parameters are not measured from
