HTML5 - Mastering the Canvas Element (II) - Coordinate System

In the previous tutorial we learned about the canvas element itself, but we really can't do any fancy artwork on our canvas until we know about its coordinate system.

So, in this post, we'll discuss the coordinate system of the canvas and see how it's different from the one you learned in math class.
Here's a picture that I made for you guys that will explain the coordinate system to you at a glance.

How the coordinate system differs...

Though the image itself is super-self-explanatory, the purpose of this post it to teach you something, so let me explain.

A short math review and explanation

In math, you divide the space into four "quadrants" with two lines called "axes" (singular axis). The center of the space or the point of intersection of the two axes is "0, 0" and we start counting from that point in the four directions. So, if I ask you to plot a point "3, 2" you would move 3 spots to the right and 2 spots to the top. If I ask you to plot "-3, -2" you would move 3 spots to the left and 2 spots to the bottom. If I ask you to plot "-3, 2" you would move 3 spots to the left and 2 spots to the top. If I ask you to plot "3, -2" you would move 3 spots to the right and 2 spots to the bottom.

In HTML5 canvases and in general computers, you don't divide the space. The upper left corner is 0, 0 and the rest of the space is positive. So, if I ask you to plot "3, 2" you would move 3 spots to the right and 2 spots to the bottom.

In fact, for all the points "x, y" you will move "x" steps to the right and "y" steps to the bottom. Though in principle it is possible to have negative values for x and y, it would simply mean that the object is outside your computer screen. This might be useful if you want an object to be partially inside the screen.

Conclusion

So, that is how the coordinate system for the canvas element in HTML5 works. In the next tutorial, I'll actually start teaching you guys to draw stuff on the screen using JavaScript canvas APIs.

Also, just a side note, we're working on a cool tool for you guys to use that we will launch in a few months. This will enable you to share ideas and understand concepts better. Let the suspense begin!