The canvas is simply a rectangular array of pixels that individually can be colored. Everything will be built from a single function called PutPixel(x, y, color)

Coordinate Systems

The canvas has a width and a height measured in pixels, I'm going to call these width and height. A Coordinate system refers to pixels on the screen. On most computers the origin starts at the top left. x increments towards the right of the screen and y increments towards the bottom of the screen.

Figure 1-1: coordinate system used by most computers

This is a natural system for computers beacuse of how video memory is organized, but for most people its not very natural to work with. In 3D graphics programmers use the coordinate system typically used to draw graphs on paper. The origin is in the center: x and decreases towards the left and increases to the right. y increases towards the top and decreases towards the bottom.

Figure 1-2: coordinate system used by our canvas

Using this coordinate system the range of x is [-height/2, height/2) and the range of y is [width/2, width/2).

The canvas will be drawn to a computer screen so there needs to be a conversion from one coordinate system to the other. To accomplish this you need to change the center of the coordinate system and revers the directionm of the y axis.

the conversion looks like this:

screen_x = canvas_width/2 + canvas_x

screen_y = canvas_heigth/2 + canvas_y

The PutPixel function will do this conversion automatically