Wrestling with HTML5’s Canvas element

Since I started on the journey towards becoming a web developer, I have been curious about the visual side of web applications. The internet seems to be full of interesting graphics, games, and artwork, and I was completely puzzled as to how people managed to create them with the tools that I was learning. While there are many different ways that people approach 2D and 3D graphics in the browser, such as Flash and SVG, the format I found myself exploring recently has been the HTML canvas element.

Introduced with the release of HTML 5, the canvas element can be added to any HTML page, and can interact with the DOM in much the same way as any other HTML element. This gives it an advantage over Flash, which must be embedded in the page and requires that a user has the necessary plugin installed. The canvas element is what it sounds like: a blank bitmap that gives you control over its pixel content through Javascript.

Some initial experimentation with the canvas API has yielded some really cool results. Something I have been doing, and that I definitely recommend to anyone interested, is to spend some time reverse-engineering simple logos. There are tons of tutorial videos that can get you accustomed to the API’s various methods, and how to use them to draw 2D shapes. As someone with very little experience with any kind of graphic design, this also helped me see just a little bit of the method behind why designers make the decisions they do, which was interesting in and of itself.

Putting together a basic Canvas project

It is easy to get started working on your first HTML canvas project. To add the element to any existing page, simply add it to your HTML file and define the width and height:

<canvas id='my-canvas' width='200' height='200'></canvas>

Then you need to connect your HTML to a javascript file where you can keep your logic. The first thing to do in your javascript file is to assign your canvas to a variable and get ‘context’ for your canvas. In our case, we will be using the ‘2D’ context, which provides objects, methods, and properties for interacting with and creating 2D shapes.

let myCanvas = document.querySelector('#my-canvas');
let context = myCanvas.getContext('2d');

Next you need to start drawing! For any line or shape, you use the Path2D function. Then, depending on the shape you are trying to draw, you can either draw it line by line or use one of canvas’s built in methods:

let shape1 = new Path2D();
shape1.moveTo(20, 80);
shape1.lineTo(100, 120);
shape1.lineTo(180, 80);
shape1.lineTo(100, 40);
shape1.closePath();
let shape2 = new Path2D();
shape2.rect(40, 0, 120, 80);

The last step is to actually render the shape. This can be done a few different ways. If you want to outline it and leave the middle blank, you can use the .stroke method; if you want to fill it in, use the .fill method.

context.fill(shape1);
context.stroke(shape2);

And thats the basics! There are many more nuances to canvas to explore, but this is an extremely basic intro to what it can do.

Final Thoughts

One thing I did notice about canvas was that it took a long time to accomplish anything; while this was partially because I am new to the technology, it also just takes a lot of lines of code to do fairly basic tasks. Unless the shape you are trying to draw is particularly common, in which case canvas has built in methods to help, I was spending a lot of time writing out the start and endpoints for each line I wanted to draw one by one. This seems like an issue that would be massively frustrating when trying to tackle a larger project, such as a game. Luckily, there are libraries available for canvas that vary depending on your end goal: some of the most popular include PixiJS, CreateJS, and Three.js.

Beyond the basics of canvas that I am exploring, there seems to lie a whole world of potential in the canvas element. One only has to look as far as Codepen to see some of the crazy projects people have made, from complex games to 3D motion graphics. While some of this stuff requires some serious math and physics, not to mention programming knowledge, I am definitely interested in spending more time with it and seeing what I can make.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.