Before we can get our cat moving around, we need to get a few things ready.
Previously, when we had the cat falling down the canvas, we had a variable to keep track of its "y" position. Now we'll need an "x position" as well.
var x_pos = 0;
var y_pos = 0;
Then we create a variable which can hold an image, and
set its source.
var MyImg = new Image();
MyImg.src = "http://s2js.com/img/etc/cat_grumpy.png";
Finally, we have a timer that fires every 40 milliseconds to draw the image at the current x-y. This is our
animation loop.
function MyTimer () {
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
ctx.drawImage(MyImg, x_pos, y_pos);
}
setInterval(MyTimer, 40);
When we run this, the cat just sits there and doesn't move. Because we haven't written that bit yet.