Before we start writing our first code, we need to learn about some tools we are using, and we start with the canvas.
The canvas element in HTML is used to draw graphics with JavaScript. The origin of the canvas is in the top-left corner, and you measure distance in pixels. You can think of a piece of squared paper, but with many tiny squares. You can fill every pixel with a specific color, but usually, you will use the pixels as coordinates to describe where you want to draw something.
The origin (0,0) of the canvas and the x- and y-direction
Here you can see a magnified version of the canvas. Every square is a pixel on your screen and can be filled with a color.
Magnified pixels of the canvas, they start at 0,0 in the top-left corner.