Getting Started with the HTML Canvas Tag

There are many useful tags in HTML. We have tags for headers, paragraphs, lists, tables, and so much more. One tag in particular stands out to be a little bit different. That’s the canvas tag. The canvas tag in html simply just lets us draw shapes onto our html page. That probably sounds pretty useless right about now. You might be asking ‘why would you ever want to have an entire section of your website to just shapes?’ With the canvas tag we can have dynamic graphics, in browser games, animations, and interactive video. Pretty cool, right?

What gives canvas its flexibility are the JavaScript methods that are tied to this tag. We can use DOM manipulation to draw custom shapes like rectangles, circles, and lines. We can also style our shape with CSS colors and make gradients as well. We can even make functions that will adjust video to make a greenscreen effect, replacing a color with an image.

In this post I’ll cover the basics on using this tag, as well as a few functions for creating shapes.

To set up we need to have our HTML file filled out with a canvas tag that has an id, and a JavaScript file linked to our HTML file. In my example I’ll call my canvas id “test-canvas”.

Notice we put the script tag at the bottom of the page.

We also have the option of setting our canvas width, height, and style. For now we’ll only change id and style. We also want to make sure our scripts load after the canvas tag, so we’ll put it at the bottom instead of in the head tag.

Next we can switch to our JavaScript file and begin experimenting with things. First we need to get our canvas id and set it to a variable. We also want to use the getContext() method to let us use our canvas functions.

ctx is what we’ll use to draw our shapes!

The getContext() method returns the drawing context for canvas. We’re going to use “2d” which allows us to draw 2d shapes onto our canvas. There is also “webgl” which would let us draw 3d shapes as long as we’re using a browser that supports webgl. Now we can use our ctx variable to draw 2d shapes!

But first, since I didn’t set the width and height of the canvas, I’ll do it here in JavaScript. The reason I’m doing this in JavaScript is because we can easily change it here, or even change it to dynamically be whatever our current screen size is.

This will let us set our canvas size more dynamically.

Draw methods for canvas take x and y coordinates and puts them in that spot on our canvas. The range of x and y coordinates corresponds with our size of canvas, which in our case is between 0,0 and 750,750.

The general process of drawing shapes is to tell it where to start, tell it what to draw, then to draw the whole thing. Lets see this by making a simple line function.

The last line calls our drawLine function.

.moveTo() tells it to move to that spot, .lineTo() tells where to draw to, then .stroke() tells it to draw. I also set the parameters for this function to take in starting position and ending position. With that function being called, it will draw a line from 700,100 to 100,700.

Next we’ll make a draw square function. The process is similar but instead of using moveTo() we’ll use beginPath(), and instead of using lineTo() we’ll use rect() method.

The .rect() method takes in a x and y coordinate as well as width and length values

The next function we’ll make is a drawCircle() function. This will use the arc methods parameters are x and y coordinate which is the center of the circle, the radius of the circle, the starting angle in radians, the ending angle in radians, and an optional extra parameter that dictates whether it draws clockwise or counter clockwise.

The last thing I’ll show in this post is filling a rectangle with a linear gradient. We’ll start by making a new variable with the createLinearGradient() method. We’ll then add our colors to the gradient and then apply it to a rectangle using fillRect() method.

The createLinearGradient() parameters are a start point x and y, and a endpoint x and y. The addColorStop() methods parameters are a values between 0.0 and 1.0 that represents the position between start and end in the gradient, and a CSS color value. The fillStyle() method sets our gradient to the fillRect() method which draws it out.

This is only scratching the surface of the canvas tag in html. There’s also so much more you can do with the JavaScript. You can add event listeners to look for inputs from your keyboard and mouse. Then manipulate shapes to react to those inputs, but that’s for another article. I hope you’ve learned the basics of how to use the canvas tag in HTML, and have seen the potential that this tag has to offer.

Software Engineering student at Flatiron School