Timeout2

<!DOCTYPE html>
<html>
<head>
<!-- Like my java example -->

<title>CS 86 example Timeout2</title>

<script>

class Main { //*2 Just use animate() to start things rolling
    constructor () { //*2
        this.frame = 0
	this.animate() //*2
    }

    // Animation loop
    animate () { //*1 Modern approach for animation
	this.frame++ //*1
	this.draw (); //*1

	requestAnimationFrame (() => {this.animate()}); //*1 
    }

    draw () { //*3 Redraw picture based on this.frame, adjust for 60 vs 10 fps
	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<this.frame/6; 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>