In this lesson, you will be introduced to the coordinate system in the JavaScript Canvas API. To be able to tell the context where to draw, you need to understand the coordinate system.
This lesson is part of a module on the JavaScript Canvas API and other JavaScript concepts. For the first lesson in this module, please see JavaScript Canvas API Introduction.
Basics of the Coordinate System
To start drawing things you need to know how to tell the context where to draw. The basis of this is the coordinate system which is shared by most drawing contexts across all programming languages.
There are two axes to two-dimensional space, what you can think of as the horizontal axis, is usually called the "x" axis, and the vertical, the "y" axis. A point in space is usually expressed as an (x, y) coordinate.
In many schools and universities, the y-axis goes from bottom to top, like a building, where the ground floor is zero and the numbers go up as you ascend. But in most programming environments, the top of the screen is zero!
Canvas Dimensions and Points
How does this relate to the HTML canvas? If you're following along in this project, the HTML in the body so far looks like this:
<!-- basics.html -->
<!-- ... -->
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
<!-- ... -->
The JavaScript:
// basics.js
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
The canvas initialized here is 300 pixels wide by 300 pixels tall. That is defined in the HTML.
You can also set the width and height of the canvas in JavaScript:
HTML:
<!-- basics.html -->
<!-- ... -->
<body>
<canvas id="canvas"></canvas> <!-- no width or height -->
</body>
<!-- ... -->
JavaScript:
// basics.js
const canvas = document.getElementById('canvas');
[canvas.width, canvas.height] = [300, 300]; // set width and height
const context = canvas.getContext('2d');
Note how destructuring is used here to quickly assign two similar variables on one line.
In this project you'll be setting the width and height in the JavaScript to keep all your code in one place, however, it's more common to set the width and height in the HTML.
The top left of the canvas is the (0, 0) point. The bottom right is what is thought of as the (300, 300) point.
This point notation covered earlier, (x, y), is generally used in math to describe points in space, yet this is not a type of notation that JavaScript understands natively. By default, you call an API method that accepts an x and a y number as separate arguments.
The Origin Point Explained
It can take a little while to get used to working with coordinates in programming. If you learned about coordinates at school, the x and y space is represented with the origin point (0, 0) on the bottom left. If you move to the top right, your x and y will both increase. Not so in most programming environments, here, the origin is top left, and the maximum x and y is at the bottom right!
Something to bear in mind when working with coordinates and pixels is that the top left pixel on the screen is not the same as point (0, 0). A point does not have any area, it's just a position. The top left pixel, on the other hand, is actually more like a square that has its top left point at (0, 0), and the bottom right point at (1, 1).
Try It Yourself
You can try to draw a square from (0.5, 0.5) to (1.5, 1.5). What the canvas does in these situations is that it interpolates the colors between pixels, so instead of a sharp square, you get a blurry one. So if you require nice sharp lines in your projects, keep this in mind.
Learn by Doing
It's advisable to keep some sheets of paper handy, or a small whiteboard to be able to sketch out the canvas and in that way be able to visualize and estimate the coordinates that you want to draw while you work through the lessons in this module.
Summary: Canvas API Coordinate System
- In a coordinate system, there are two axes:
- The x-axis (left-to-right)
- And the y-axis (bottom-to-top)
- You can initialize an HTML canvas with a height and width
- The origin point refers to the 'starting' point in a two-dimensional coordinate system - denoted as
(0, 0) - In most programming environments the origin point is found at the bottom-right corner of the of the space