The Coordinate System

Overview

Overviewvisual1

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.

Editor (write code below)
var canvas = document.getElementById('coordinates_example1'); var context = canvas.getContext('2d'); context.font= '16px Arial'; context.textBaseline = 'middle'; context.fillStyle = '#000000'; canvas.addEventListener('mouseout', function(e) { context.clearRect(0, 0, canvas.width, canvas.height); }); canvas.addEventListener('mousemove', function(e) { context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.arc(e.layerX, e.layerY, 3, 0, 2 * Math.PI, false); context.closePath(); context.fill(); var text = '(' + e.layerX + ', ' + e.layerY + ')'; context.fillText(text, e.layerX + 5, e.layerY); });
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)

Challenge 1

Challenge1visual1
What your drawing should look like

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).

Editor (write code below)
var canvas = document.getElementById('coordinates_challenge1'); var context = canvas.getContext('2d'); // DRAW THE FIRST POINT AT (50, 150) HERE // DRAW THE SECOND POINT AT (200, 100) HERE // DRAW THE THIRD POINT AT (250, 200) HERE function drawPoint(x, y) { context.save(); context.fillStyle = '#0000FF'; context.beginPath(); context.arc(x, y, 3, 0, 2 * Math.PI, false); context.fill(); context.restore(); }
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)
Challenge1

Challenge 2

Challenge2visual1
What your drawing should look like

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?

Editor (write code below)
var canvas = document.getElementById('coordinates_challenge2'); var context = canvas.getContext('2d'); // DRAW THE FOUR POINTS HERE function drawPoint(x, y) { context.save(); context.fillStyle = '#0000FF'; context.beginPath(); context.arc(x, y, 3, 0, 2 * Math.PI, false); context.fill(); context.restore(); }
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)
Challenge2

Challenge 3

Challenge3visual1
What your drawing should look like

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.

Editor (write code below)
var canvas = document.getElementById('coordinates_challenge3'); var context = canvas.getContext('2d'); // DRAW YOUR POINTS HERE function drawPoint(x, y) { context.save(); context.fillStyle = '#0000FF'; context.beginPath(); context.arc(x, y, 3, 0, 2 * Math.PI, false); context.fill(); context.restore(); }
Message Log
This is a lesson, not a challenge, the code runs automatically.

But change it! Play with it! Click "Run" to see your changes.

Run
Run and Focus Canvas
Reset
Canvas (your drawing will display here)
Challenge3

Ready for the next lesson?

Next up, the "Functions" lesson >