S2JS - Making Sprites move : Falling images

Some people think rectangles aren't very exciting.

It's not much harder using an interesting image instead of a boring rectangle.

In Javascript, images are held in variables. We declare and load the image like so:

var MyImg = new Image(); MyImg.src = "http://s2js.com/img/etc/cat_grumpy.png";

You only have to declare and load the image once, then you can draw it as many times as you like:

ctx.drawImage(MyImg, 130, y_pos);

<HTML> <head> <title> My new Web Page </title> </head> <body> <canvas id=myCanvas width=300 height=300 style="background-color: pink;"> </canvas> <script> var ctx = myCanvas.getContext("2d"); var y_pos = 0; var MyImg = new Image(); MyImg.src = "http://s2js.com/img/etc/cat_grumpy.png"; function MyTimer () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); y_pos = y_pos + 1; ctx.drawImage(MyImg, 130, y_pos); } setInterval(MyTimer, 40); </script> </body> </html>