# The Coordinate System

## Overview

When drawing on a canvas, the canvas's context uses a coordinate system to position lines, rectangles, and other shapes on the canvas.

By default, the origin (0, 0) of the context's coordinate system is the top left corner of the canvas. The x-coordinate is the distance of a point from the origin moving to the right and the y-coordinate is the distance from the origin moving down.

For example, the point (80, 50) is 80 pixels to the right of the origin and 50 pixels down.

## Explore the Coordinate System

To see the coordinates of a point on the canvas, mouse over the grey area in the canvas to the right.

Message Log

## Challenge 1

Use the `drawPoint()` function to draw three points.

For example, to draw a point at (80, 120), type:

``drawPoint(80, 120);``

Draw the first point at (50, 150), the second point at (200, 100), and the third point at (250, 200).

Message Log

## Challenge 2

Use the `drawPoint()` function to draw points at the four corners of the rectangle.

The top left corner of the rectangle is at (80, 40). The width of the rectangle is 200 and the height is 120.

Hint: The top left corner is 80 to the right and 40 down from the origin and the bottom right corner of the rectangle is 200 to the right and 120 down from the top left corner of the rectangle. Where is the bottom right corner relative to the origin?

Message Log

## Challenge 3

Use the `drawPoint()` function to draw points at the bottom left corner of the green rectangle and the top right corner of the blue rectangle.

The top left corner of the green rectangle is at (40, 180), and its width is 120 and height is 60. The width of the blue rectangle is 220 and its height is 180.

Hint: It's okay to draw extra points to figure out the coordinates of the bottom left corner of the green rectangle and the top right corner of the blue rectangle.

Message Log

## Ready for the next lesson?

Next up, the "Variables" lesson >