Timeout1: Timeout1.html

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

<title>CS 86 example Timeout1</title>

<script>

class Main { //*1 frame variable as an ivar of Main
    constructor () { //*1
        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 method
	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>
[download file]