Canvas - Introducing HTML5 - page 135

FIGURE 5.18 While away the
hours whilst you watch Bruce's
face bounce around a canvas
animation.
Since I'm going to rotate Bruce's face, I'm going to let another
canvas handle that task (so that I can keep my main canvas free
from rotation and translations). This way it keeps my tasks sim-
ple in that in one canvas I'm rotating an image of Bruce; in the
second, I'm working out the position of his face on the canvas
and drawing it there.
var ctx = document.querySelector('canvas').
¬ getContext(“2d”),
ballctx,
x = 100, // arbitrary start points
y = 50,
dx = 2,
dy = 4,
width = ctx.canvas.width,
height = ctx.canvas.height;
// load the image
ballImg = document.createElement('img');
ballImg.src = 'bruce-ball.png';
// once loaded, start the ball bouncing
ballImg.onload = function () {
var ball = document.createElement('canvas');
ball.style.display = 'none'; // hide
ball.height = 50;
ball.width = 50;
document.body.appendChild(ball);
// has to be in the DOM to paint properly
ballctx = ball.getContext('2d');