3.2. The 2d rendering context

The canvas element isn't the cool part of canvas at all; that acclaim falls to the 2d rendering context, the piece of awesome that you draw absolutely everything on to. The purpose of the canvas element is to act as a wrapper around the 2d rendering context, providing you with all the necessary methods and juicy functionality to draw on and manipulate it. It's really important to understand this, so let me make it clear: you draw on to the 2d rendering context, not the canvas element. You access and display the 2d rendering context through the canvas element. I don't expect this to make complete sense yet, my hope is that things will clear up a bit when you get stuck in with using the canvas for yourself.

3.2.1. The coordinate system

The 2d rendering context is a standard screen-based drawing platform. Like other 2d platforms, it uses a flat Cartesian coordinate system with the origin (0, 0) at the top left. Moving to the right will increase the x value, and moving downwards will increase the y value (see Figure 3-1). Understanding how the coordinate system works is integral if you want to have things draw in the right place.