Ricardo Cabello (aka Mr Doob) has created this interesting procedural drawing tool called “Harmony”. Harmony allows you to sketch in a variety of different styles including spiderwebs, fur, ribbons, grids and circles.

There are many different drawing types to try

Comments from the Author:

During the process I found out that, for some reason (apparently lack of hardware acceleration), Firefox and Opera do not support context.globalCompositeOperation = ‘darker’. This was on the HTML5 spec before but got removed. Just so you know what I’m talking about, this is like the “multiply” blending in Photoshop.

Ricardo encourages developers to “take a look at the code, play with it and if you come up with a nice brush you think should be added to the default pack, please, send it over!”


Сергей Чикуёнок has created this fantastic ambilight canvas demo based on the Phillips TVs LED surround lighting. As the video plays (using the HTML5 video element), the average colour is used to determine the color of 5 light sources rendered with the canvas element.

Just like the real thing!

You can read about how the demo was created in English here.

Dot To Dot

Mehdi Mousavi has created a canvas demos based on the idea of the dot-to-dot puzzles which you may remember from your childhood. As well as including a demo, featuring Boo Boo Bear from children’s cartoon Yogi Bear, Mehdi has produced a tutorial of how he created the demo.

Keep your child amused with canvas!

To play the dot to dot game, simply move the mouse cursor over the consecutive numbers starting with 1. The picture will be reveal as you go.

Same Game

The Same Game is a tile removal puzzle game where you try to remove all of the tile pieces from the board. Tiles can only be removed when they are grouped with more tiles of the same color. Renaudeau Gaetan has created this canvas implementation.

Match tiles of the same colour to win

The game works by using 2 canvas elements and jQuery event management. The main canvas is used to display game tiles, while the second is used for the mouse hover effect to show the user how many tiles they will remove on their next click.

Animated Harmonograph

Hernan Amiune has created this rather pretty animated harmonograph canvas demo.

A harmonograph

A harmonograph is a mechanical apparatus that employs pendulums to create a geometric image. The drawings created typically are Lissajous curves, or related drawings of greater complexity.

Chip Defender

Chip Defender is a tower defense game by Zanarotti Michele built with JavaScript, jQuery and the HTML5 audio and canvas elements. For those of you who haven’t played a tower defense game before, the idea is to try to stop waves of enemies from crossing the map by building towers which shoot at them as they pass. When an enemy is defeated the player earns money or points, which are used to buy or upgrade towers.
Canvas is used to load and rotate images, draw progress bar and arcs, paths and for some of the effects.


Zanarotti has made the project available as jsDefender on Sourceforge. The project is themeable and can be configured by XML to make your own tower defense game.

Welcome to Canvas Demos

Home to applications, games, tools and tutorials that use the HTML 5 <canvas> element - which allows for dynamic scriptable rendering of bitmap images.

Browser check

  • canvas
  • canvas text

It looks as though your browser does not support canvas natively. Why not try one of these browsers?

Learn more about canvas support

Canvas news

Site news

Submit your demo

Submit your demo, and if we like it we'll feature it on Canvas Demos!