Image Evolution

AlteredQualia’s Image Evolution is a interesting canvas demo based on an idea by Roger Alsing who asked: “could you paint a replica of the Mona Lisa using only 50 semi transparent polygons?”

Image Evolution takes this one step further by allowing you to specify the target result image, the number of polygons, the mutation level and even apply a variety of effects.

Sit there long enough and you can paint your own Mona Lisa

Sit there long enough and you can paint your own Mona Lisa

The evolution happens as follows:

Firstly, setup a random DNA string to form the application start. Then:

  1. Copy the current DNA sequence and mutate it slightly
  2. Use the new DNA to render polygons onto a canvas
  3. Compare the canvas to the source image
  4. If the new painting looks more like the source image than the previous painting did, then overwrite the current DNA with the new DNA
  5. Repeat from step 1

Check out the Image Evolution demo


Pipes, built by Yahoo, is an interesting example of how using the canvas element can enhance the experience of a web based application without needing to resort to Flash. In a world where more and more applications are moving to the web, Pipes offers an insight in to how we can make applications more interesting.

Pipes is a powerful composition tool built by Yahoo designed to aggregate, manipulate, and mashup content from around the web. Simple commands can be combined together to create output that meets your needs. For this application, canvas is used as a simple visual tool to represent the pipes themselves.

Connecting the pipes

Connecting the pipes to make a feed

Check out Pipes; watch the video to learn how to build your own Pipe or view our special canvas flavoured feed

CSS Sprites Generator

CSS sprites are great. They can help reduce the load time of your page by decreasing the number of HTTP requests made.

To create CSS sprites, all you need to do is place all of your smaller images into one big image. Then using CSS, adjust the image positioning using the background-position property to display the part of the image you require.

Tim Chien has created a useful graphics tool which can generate the larger image for your CSS sprites automatically. You simply supply a list of images, select a appropriate padding and then drag the smaller images around until you are happy. Once you are done, the generator supplies both the large image and all the background positions you need to get your smaller images.

Generate those sprites!

Generate those sprites!

Although this application works in Opera, Safari and Chrome; it can only save in Firefox or Internet Explorer.

Check out the CSS Sprites Generator


  • Tools
  • Posted on July 10th, 2009

Scott from the Filament Group has posted about a new jQuery plugin called Visualize which they have created that creates charts and graphs from tabular data using the HTML canvas element.

Pretty charts for everyone thanks to Visualize!

Pretty charts for everyone thanks to Visualize!

Accessible data visualization in HTML has always been tricky to achieve, particularly because elements such as images allow only the most basic features for providing textual information to non-visual users.

Using the plugin is as simple as including jQuery and the plugin and calling the code from your HTML table:

Check out the Visualize plugin

Game Development Tutorials

Fancy making a game? Using Canvas? You do! Excellent!

Matthew Casperson has been incredibly busy writing this whole bunch of tutorials about developing a platformer using canvas. From keyboard input to parallax scrolling, from animations to resource loading – it’s all covered in his tutorials.

Jump, run, jump some more.

Jump, run, jump some more.

Check them out here:

Open Web Tools Directory

  • Demos
  • Posted on July 8th, 2009

Mozilla have come up with something special yet again – this time in the form of the Open Web Tools Directory. The directory lists all the useful applications and tools available to web developers, with a component to allow you to narrow down your search.

But rather than display this information in a table, Mozilla have opted to display the information in a canvas element and make a space theme of it.

Yay! Space theme!

Yay! Space theme!

View the Open Web Tools Directory

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!