Canvas Playground

Using the canvas to understand the canvas:

Your browser does not support HTML5 canvas.

The x axis is horizontal. The y axis is vertical. The numbers represent pixels. The lines of the grid are 20 pixels apart. This canvas is 600 pixels x 400 pixels.

Corners as x,y coordinates:
Top left: 0,0
Top right: 600,0
Bottom left: 0,400
Bottom right: 600, 400

Canvas tutorial: Applying styles and colors

Using text on the canvas

Canvas Playground index