<!DOCTYPE html> <html> <head> <!-- Like my java example --> <title>Comp 86 example Timeout2</title> <script> class Main { //*2 Just use animate() to start things rolling constructor () { this.frame = 0 this.animate() //*2 } // Animation loop animate () { //*1 Modern approach for animation requestAnimationFrame (() => {this.animate()}); //*1 this.frame++ //*1 this.draw (this.frame/6); //*1 } draw (nboxes) { //*3 Redraw picture based on frame const gc = myCanvas.getContext("2d"); // Clear background gc.fillStyle = "white"; gc.fillRect (0, 0, myCanvas.width, myCanvas.height); // Draw boxes gc.strokeStyle = "black"; for (let ibox=0; ibox<nboxes; ibox++) { //*3 // First, reset to identity gc.setTransform (1, 0, 0, 1, 0, 0) //*4 Sets transform for whole GC gc.translate (100+2*ibox, 100+2*ibox) //*4 gc.rotate (ibox/10.) // in radians //*4 gc.strokeRect (-25, -25, 50, 50) //*4 } gc.setTransform (1, 0, 0, 1, 0, 0) //*5 Reset transform since we messed it up } } window.onload = function () { new Main () } </script> </head> <body> <canvas id="myCanvas" width="500" height="500" style="border-style: solid; border-color: blue; border-width: 1px" </canvas> </body> </html>