Introduction To The Canvas & Co-Ordinates

📝 We continue in the Speedy Chef project folder throughout this section.

The Canvas API

We are now going to have a little fun with drawing using JavaScript. This involves using a web API called the Canvas API, and a HTML canvas element too.

This section covers some of the basics, and then in the rest of this section, we will draw our pizzas and show the different toppings as we add them.

Understanding co-ordinates

First let’s cover an essential part, and this is understanding co-ordinates. There is a HTML element called canvas which allow us to draw to it using JavaScript.

We set the width and the height of the canvas, and then we can navigate this pixel like grid using coordinates. The x axis runs left to right, and the y axis runs top to bottom.

Using these x and y positions, we can move to any location such as x=0, y=0 is the top left corner. Then we can move across or down any amount, such as we see in this example where x=5, and y=3:

Understanding co-ordinates are essential to using the canvas.

Selecting the canvas element

Back to our project, in the HTML file, we have a canvas element:

<canvas id="pizza_area" width="250px" height="250px"></canvas>

This has a width and height set. Using JavaScript, we can select this just as we do with other element at the bottom of our script:

const canvas = document.querySelector('#pizza_area');

Accessing the 2d context

We can then call a method called getContext, passing in 2d:

const canvas = document.querySelector('#pizza_area');
const ctx = canvas.getContext('2d');

This context is an object containing properties and methods we can use to draw to the canvas. We are only going to be needing the 2d features for these examples. We then store this into a variable so we can call these properties and methods.

Stroke & Fill

Two concepts which are important to understand are stroke and fill. Stroke is like a pencil line, or outline.

Fill as it sounds, fills a shape. To draw a rectangle, we have a strokeRect method and a fillRect method:

// 1. strokeRect method (x,y,width,height)
ctx.strokeRect(0, 0, 200, 200);

// 2. Or we can use the canvas variable to access the width and height
ctx.strokeRect(0, 0, canvas.width, canvas.height);

// 3. Solid fill version
ctx.fillRect(20, 20, 100, 100)

Setting the line and fill color

By default, a standard black color will be used in the browser, and this can be changed for the stroke and fill:

ctx.strokeStyle = 'green'; // add green stroke
ctx.strokeRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'hotpink'; // add pink fill
ctx.fillRect(20, 20, 100, 100);

The arc method

The CanvasAPI has an arc method to help with drawing arc's and circles:

// (centre point x, centre point y, radius)
ctx.arc(canvas.width / 2, canvas.height / 2, 100);

Here we pass in half of the canvas height and width, which will be the center point. Followed by 100 to represent the radius. Then the last two values are the start and end angle.

Zero as the starting angle, and 2 radians as the end angle:

ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, 2);

These are in radians not degrees. This will not yet draw to the canvas because we need to declare if we want this the be a stroke line, or a solid fill:

ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, 2);
// strok or fill options:
ctx.fill();
ctx.stroke();

This will give is a smile like shape. To do a full circle in radians, or 360 degrees, the end value is 2x PI:

ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, 2 * Math.PI);

And we can also set properties such as the line width and color too:

ctx.arc(canvas.width / 2, canvas.height / 2, 100, 0, 2 * Math.PI);
ctx.lineWidth = 5;
ctx.strokeStyle = '#f5cf89';
ctx.stroke();

The lineTo and moveTo methods

Along with these methods to draw pre-set shapes, we can also draw freehand too, similar to a pencil tool. To see this, let's replicate the green outer rectangle we first drew. Comment that one out:

// ctx.strokeStyle = 'green';
// ctx.strokeRect(0, 0, canvas.width, canvas.height);

And we can draw this ourselves using coordinates. Both the lineTo and moveTo methods will move to a coordinate, but the difference is lineTo will draw a line, and moveTo will simply travel to a new location:

ctx.moveTo(0, 0); // moves to top-left location without drawing
ctx.lineTo(canvas.width, 0); // draw line to top-right
ctx.lineTo(canvas.width, canvas.height); // draw line to bottom-right
ctx.lineTo(0, canvas.height); // draw line to bottom-left
ctx.lineTo(0, 0); // draw line back to top-left
ctx.stroke();

The beginPath and closePath methods

We can also add a method called beginPath, at the beginning of our set of paths:

ctx.beginPath(); // begin a new path
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.lineTo(0, 0);
ctx.stroke();

This is useful since it clears any existing paths, and it also means this start position is remembered, so we can use closePath to return to it, rather than moving back to position 0, 0:

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(canvas.width, 0);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath(); // close path and return to starting point
ctx.stroke();

We can also write on the canvas like this:

ctx.font = '40px Helvetica';
// text to display, x pos, y pos (to baseline of text)
ctx.fillText('Canvas API', 20, 200);

Canvas can be used for lots of things, there are also other methods to also explore. We will use the canvas during our Speedy Chef project to create pizzas to show in the kitchen area!