Tutorial step 1

First, we write a canvas element in the HTML, specify the dimensions of 300x300, give it a black outline and a light gray background (using hexadecimal color code).

We give it the id of "canvas" so we can interact with it from the code.

Inside the script tags, we start by drawing a simple rectangle on the canvas.

Are you dying of excitement yet?

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

<script>

	//here, we attribute the canvas variable to our HTML canvas element, identifying it by its id "canvas"
	let canvas = document.getElementById('canvas')
	
	//ctx stands for context, which is the interface object we use for drawing stuff on that canvas
	let ctx = canvas.getContext('2d')

	//Tell the drawing interface we want to use the color red for filling shapes
	ctx.fillStyle = 'red'
	
	//Draw a rectangle starting from the coordinates X as 100 and Y as 50, with the size of 80 x 40 pixels
	//In this system, coordinates start at the top left, and they increase by going right and down
	ctx.fillRect(100, 50, 80, 40)


</script>