Awesome things created with HTML 5 Canvas

One such advancing technology is HTML5 which has brought some exciting new advantages to the world of development, including a handy (and fun) little element called <canvas>.

Although Canvas was first created in 2004 by Apple, it gained popularity in 2014 when HTML5 was first published. Since then developers have invariably been coming up with new, fun ways in which to use Canvas.

So what is Canvas?

As I mentioned before, Canvas is an element that can be used in HTML5, and it looks a little something like this:

What it does is allows you, as the programmer, to render graphics on the fly via scripting (usually JavaScript). The element is the container for the graphics whereas the script is used to actually draw the graphics. Canvas allows you to draw 2D as well as 3D (known as Webgl) using paths, boxes, circles, text, shapes and images all of which can be animated and even made interactive. These features make it so that Canvas can be used and manipulated in multiple different ways and, as a result, developers from around the world have created fantastic and unique effects using Canvas – even games!

So now that we know what it is, what can it do?

As I browse the web I often come across awesome projects or experiments that other developers have worked on and ferociously bookmark them. Here are a couple examples of some Canvas projects some really cool people have worked on.

The first example is called Gravity points, created by Akimitsu Hamamuro. This is an interactive demo simulating physics where particles are pulled towards a point of gravity.

See the Pen Gravity Points by Akimitsu Hamamuro (@akm2) on CodePen.

The second example is a fully-fledged game called Free Rider HD that can be played in your browser. It even has a points system, achievements and a leaderboard. You can even create your own tracks! Marvel at this beast.

Another demo I came across a while ago was that of a destructible canvas video. Users are asked to click on the video where it will explode into pieces, yet the video continues playing.

Another fun, interactive canvas example is simple called Conductor. This demo tracks New York’s subway system in real time and turns each line into the string of a musical instrument that can be “plucked” on to create a sound. The lines also interact with one another, producing a sound.

This motion graphic typeface is truly a sight to behold. Not only does the text animate but there's an incredible coloured blur that's part of the animation.

See the Pen motion graphic typeface. by ara (@ara_node) on CodePen.

Another game created with canvas is reminiscent of the Windows 3D Maze screensaver from the days of yore, featuring some of my favourite things.

HTML-design

Another thing you can create using Canvas are physics simulations. Here is one of the best examples of those simulations.

As you can see Canvas is a versatile tool that is only limited by your imagination. It is one of many technologies that keeps the world of development fun and interesting. If you are interested in learning more about Canvas you can check out some tutorials here.

For more intriguing Canvas experiments follow the links below.

Scroll to top

Awesome things created with HTML 5 Canvas

So what is Canvas?

So now that we know what it is, what can it do?

Recent posts like this

Objectives-based Onboarding for HubSpot: What, Why, and How?

How to Write a Creative Brief in 10 Steps

The CDP: How to Know Your Customer with a Single Source of Truth