In the HTML canvas, we use a coordinate system to position elements, but it works slightly differently from the mathematical coordinate system you might be familiar with.
In the standard mathematical coordinate system, the origin (0, 0) is at the center. So a point with an x-coordinate of 20 and a y-coordinate of 20 would appear higher on the screen compared to a point with an x-coordinate of 10 and a y-coordinate of 10.
However, in the HTML canvas, the origin (0, 0) is located at the top-left corner. Positive x-coordinates move points to the right. Positive y-coordinates move points downward.
This means that as the y-coordinate increases, the point moves further down the canvas.
