<!DOCTYPE html> <html> <head> <!-- Like my java example --> <title>Comp 86 example Timeout1</title> <script> class Main { //*1 frame variable as an ivar constructor () { this.frame = 0 //*1 // Uses "=>" style function def so that "this" will be OUR object // rather than the HTML window element setInterval( () => { this.tick() }, 100); //*3 Start timer, will tick every 100 ms } tick() { //*2 Tick this.frame++ //*2 this.draw() //*2 } // Called only by our own tick() above, this is not a conventional paint() callback draw() { //*4 Our own routine, not a paint callback const gc = myCanvas.getContext("2d"); //*4 // Clear background (to erase previous box) gc.fillStyle = "white"; //*5 Must erase first gc.fillRect (0, 0, myCanvas.width, myCanvas.height); //*5 // Draw box gc.strokeStyle = "black"; //*6 Then draw gc.strokeRect (10+2*this.frame, 10+2*this.frame, 100, 100) //*6 } } window.onload = function () { //*7 Initialization new Main() //*7 } </script> </head> <body> <canvas id="myCanvas" width="500" height="500" style="border-style: solid; border-color: blue; border-width: 1px" </canvas> </body> </html>