HTML and CSS Reference
In-Depth Information
You don't want the image off the
<canvas>
like that, so let's translate it
and then rotate it:
var img =
document.getElementById('myimage');
ctx.translate(120,20);
ctx.rotate(Math.PI/4);
ctx.drawImage(img, 10, 10, 118, 130);
The transformations affect
the whole context, so the
order in which you apply
them is important.
Let's try the opposite order:
var img =
document.getElementById('myimage');
ctx.rotate(Math.PI/4);
ctx.translate(120,20);
ctx.drawImage(img, 10, 10, 118, 130);
You can see that the rotate
now changes the direction
the translate goes in.
Animation
One potential use of the
<canvas>
element that has many developers excited
is creating games. Already, many arcade classics of the 1980s and '90s have
been re
—
created using
<canvas>
. In order to create games, you need to have
animation. Let's look at how you can animate your canvas drawings.
