Dipping a Toe Into Canvas. Start by creating an html file. We’re…
By: Tess Neau
Tags: Html5, Graphics, JavaScript, Canvas

Canvas is a Web API which allows us to create 2D graphics on a webpage. It allows us to do through Javascript and an HTML <canvas> element. People often use canvas to create games, data visualization, photo manipulation and much more. Essentially canvas is a great tool to suck your user deeper into your webpage. Let’s go through the basics. (Note that I’ve used the MDN guide which you can follow along with here https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage)

Start by creating an html file. We’re going to add a canvas element to the body. By default the canvas will be an empty box with no border with width and height (pixels) of your choosing. That said you can’t see the canvas element unless you inspect the page with developer tools. Therefore, for the sake of this example I’ve added a border to the canvas box which you can find under the style attribute of the canvas tag.

<canvas id="theBestCanvas" width="600" height="600" style="border:1px solid rgb(110, 54, 42);"></canvas>

Now if you refresh the page, you have a blank canvas with width and height of 600 pixels, a dark brown solid border, and an id of “theBestCanvas”. Look at that.

But let’s move on the treasure of this API: graphics. So let’s add some design to the canvas with Javascript. We’ll start by making two colored rectangles.

Make sure you have a javascript file in your directory. Add a reference to the file in your html. I’ve called my file “canvas.js” and added the reference to the bottom of the HTML <body> tag for safety’s sake.

<!-- My Javascript -->

<script src="canvas.js" charset="utf-8"></script>

2. In your javascript file, you now want to access the canvas from the DOM and turn it into a CanvasRenderingContext2D instance. We do the latter with the method getContext('2d') .

const canvas = document.getElementById('theBestCanvas');

if (canvas.getContext) {

const ctx = canvas.getContext('2d');

}

I’ve added an if statement which will check whether we correctly accessed the canvas element by attempting to use the getContext method. If this works then we assign 2D as the type of context we want and declare this as a variable. I’ve wrapped this into a function declaration:

function draw() {

const canvas = document.getElementById('theBestCanvas');

if (canvas.getContext) {

const ctx = canvas.getContext('2d'); }

}

and called said function in my HTML body tag: <body onload="draw();"> . From now on we will code within the if statement block and use methods on our variable ctx .

3. Get some colored rectangles on that canvas.

aw yeah

Each rectangle requires two lines of code. Here’s the updated full code in our javascript file:

function draw() {

const canvas = document.getElementById('theBestCanvas');

if (canvas.getContext) {

const ctx = canvas.getContext('2d'); ctx.fillStyle = 'rgb(200, 0, 0)'; //red

ctx.fillRect(10, 10, 300, 400); ctx.fillStyle = 'rgba(0, 0, 200, 0.4)'; //blue with transparency

ctx.fillRect(200, 250, 390, 340);

}

}

Observe the two basic functions used to draw each rectangle, fillStyle and fillRect . The first just prepares the color palette so let’s analyze the latter:

fillRect(x, y, width, height)

Those x and y values refer to position coordinates of the rectangle in the canvas grid. We can think of canvas as an accumulation of pixels setup in a grid.

In canvas, x is the horizontal value of my drawing’s left side and y is the vertical value of my drawing’s left side.

The beginning’ position (0,0) is always at the top left of the grid. Here’s an illustration of the grid with our canvas.

what’s up my griddle

We had defined our grid to be 600 x 600 in our HTML tag. So x values go from 0 to 600 and same for y. Therefore x = 300, y = 300 is the center of our canvas grid. Then, if you have a specific width in mind, you can keep a calculator close by. I knew I wanted some space between my blue rectangle and the grid’s border.

the grid’s border is positioned at x = 600 and y = 600

and my rectangle’s starting position is x = 200 and y = 250

and i want 10 pixels worth of space between my rectangle and the border

myDesiredWidth = 600 - (200 + 10) = 390

myDesiredLength = 600 - (250 + 10) = 340

And you plug that into your method!

These are the very basics and theres a really extensive amount of projects you can use canvas with. These are some sweet ones to check out for you to get motivated.