Timeout1

Timeout1.html  [download]

<!DOCTYPE html>
<html>
<head>
<!-- Like my java example, but no use of OOP here -->

<title>Comp 86 example Timeout1</title>

<script type="text/javascript">

// Global variable
var frame = 0 //*1 frame variable

window.onload = tick //*2 Set first timeout

function tick() { //*3 Tick, also sets next timeout
	frame++ //*1
	draw() //*3
	setTimeout(tick, 100); // 100 msec //*3
}

// Called only by our own tick() above, this is not a conventional paint() callback
function draw() { //*4 Our own routine, not a repaint callback
	var c = document.getElementById ("myCanvas"); //*4
	var gc = c.getContext("2d"); //*4

	// Clear background (to erase previous square)
	gc.fillStyle = "white"; //*5 Must erase first
	gc.fillRect (0, 0, c.width, c.height); //*5

	// Draw square
	gc.strokeStyle = "black"; //*6 Then draw
	gc.strokeRect (10+2*frame, 10+2*frame, 100, 100) //*6
}

</script>
</head>

<body>
<canvas id="myCanvas"
	width="500" height="500"
	style="border-style: solid; border-color: blue; border-width: 1px"
</canvas>
</body>
</html>