Game Development Reference
In-Depth Information
Text
Drawing text on an HTML5 canvas is also pretty straightforward. The function
fillText
takes a string (the text to be drawn), and an x and y coordinate, where
the text begins to draw. Additionally, we can style the text the same way that text can
be styled through CSS. This can be done by setting the text style property string to
the font attribute.
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#f00";
ctx.font = "2.5em 'Times New Roman'";
ctx.fillText("I Love HTML5!", 20, 75);
Transformations
The canvas API also defines a few transformation functions that allow us to translate,
scale, and rotate the context's coordinate system. After transforming the coordinate
system, we can draw onto the canvas just as we normally would, and the transform-
ations would apply.
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Now the origin is at point 50x50
ctx.translate(50, 50);
ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, 50, 50);
Rotation and scaling also works the same way. The
scale
function takes a value to
scale the coordinate system by, on each axis. The
rotation
function takes a single
parameter, which is the angle (in radian) to rotate the coordinate system by.
