<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" }
	
	function update() {
		ctx.clearRect(0, 0, canvas.width, canvas.height)
		
		//We change our rect movement values to smaller ones, since we're gonna update it faster now
		rect.x += 0.4
		rect.y += 0.1
		
		if (rect.x > canvas.width)
			rect.x = 0
		if (rect.y > canvas.height)
			rect.y = 0
		
		drawRect(rect)
	}
	
	//We call this function more frequently, at 4 milliseconds instead of 400.
	//The small value is to ensure our game will look smooth even at higher frequency screens.
	//We can't go below 4 in many browsers so we leave it at that.
	setInterval(update, 4)


</script>