Tutorial step 4

Now we:

1. Create a interval function

2. Make a rectangle move a certain ammount each time that function is called

2. Tell javascript we want for that function to be called in a interval of every 400 milliseconds

<canvas id="canvas" width=300 height=300 style="border: 1px solid black; background: #EEEEEE"></canvas>

<script>

	let canvas = document.getElementById('canvas')
	let ctx = canvas.getContext('2d')

	function drawRect(rect) {
		ctx.fillStyle = rect.color
		ctx.fillRect(rect.x, rect.y, rect.width, rect.height)
	}
	
	let rect = { x: 0, y: 0, width: 32, height: 32, color: "blue" }
	
	//we use this function for making our rectagle move and get redrawn
	function update() {
		rect.x += 40
		rect.y += 10
		
		drawRect(rect)
	}
	
	//setup javascript to call our function every 400 milliseconds
	setInterval(update, 400)


</script>