S2JS - A First Game : Making the sprite2

In Scratch, a bunch of things happen automatically. But in Javascript, nothing happens unless you tell it to happen.

So the next step is to make the sprite actually appear. We'll do that by:

Making a timer that fires every 25 milliseconds, producing a frame-rate of 40 FPS
Making a function the timer calls each frame
Clearing the canvas and drawing the bug image at the appropriate place

<html> <body> <canvas id="myCanvas" width=300 height=300 style="border:1px solid"> </canvas> <script> var ctx = myCanvas.getContext("2d"); var bug_x = 0; var bug_y = 0; var BugImg = new Image(); BugImg.src = "http://s2js.com/img/etc/ladybug.png"; function Do_a_Frame () { ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); ctx.drawImage(BugImg, bug_x, bug_y); } setInterval(Do_a_Frame, 25); </script> </body> </html>