Tutorial step 3

Here we use objects instead of separated values for the rectangle drawing function.

Objects are a way to store multiple variables inside a single variable.

Our previous drawing function was fine, but since we are about to interact with these rectangles,

Think about carrying a bunch of marbles in a bag instead of your hands.

<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')

	//We swapped our function arguments for a single object
	function drawRect(rect) {
		ctx.fillStyle = rect.color
		ctx.fillRect(rect.x, rect.y, rect.width, rect.height)
	}
	
	//We declare our objects with their respective properties
	let rect1 = { x: 100, y: 50, width: 80, height: 40, color: "red" }
	let rect2 = { x: 100, y: 150, width: 80, height: 40, color: "blue" }
	
	drawRect(rect1)
	drawRect(rect2)


</script>