Latest

100pxls

100pxls, created by Chris P, is an impressive HTML5 canvas demo which can load and save 10 x 10 pixel images using Twitter.

Using the search input at the bottom of the app, 100pxls will search Twitter for that term and return the results as a wall of tiny 10 x 10 pixel images. The application also allows you to draw a tiny image and post it to Twitter – using common words to encode and decode the tweet.

A fascinating use of canvas and Twitter

100pxls is part of the Mix 10K competition, so Chris P adds that if you like his app don’t forget to vote for him!

Raster Map Reprojection

Klokan Petr Pridal has produced a raster map reprojection canvas demo using the Proj4js JavaScript library. A map projection is any method of representing the surface of a sphere or other shape on a plane, which distorts the surface but is necessary for creating maps.

He's got the whole World in his map..

The demo calculates the “map projection” directly in the web browser using only JavaScript, and displays the output with canvas.

FreeCiv.net

FreeCiv is a free and open source empire-building strategy game inspired by the history of human civilization. FreeCiv.net is a fork of the original project, designed to run in a web browser. The game can be played online against other players, or in single player mode against AI opponents. The game uses the HTML 5 canvas element to render the isometric map.

Civilised

Comments from the author:

The idea of creating a version for Freeciv which would be playable online in a browser came about some time in 2007, and this project has evolved into what it is now since then.

JaVortex

JaVortex is (to quote) a gravitational attraction particle engine NBody simulator, created by Anthony. Put simply, the demo involves lots of particles attracted to each other and the position of the mouse cursor. As they move around the screen, they leave colourful trails.

JaVortex

Cool vortex, ja?

There are various settings to play around with, including the number of particles and whether NBody is turned on or off. With NBody off, the demo will go much faster,and allow for many more particles.

Momoflow

Momoflow, by Alexander Presber, is a canvas coverflow implementation using jQuery.

After playing around with the YUI Coverflow canvas demo, Alexander felt it was rather overengineered; difficult to tweek and had some performance issues – so what better way to improve the demo than to create your own?

Coverflow with jQuery

To help increase the speed of the demo, Momoflow caches each image and it’s reflection on to an intermediate canvas, perspectively transforming this onto another canvas for each rendering angle.

Canvas Invaders

In 1978 Space Invaders was released in to arcades everywhere, now it has been remade as a canvas game as yet another demonstration of what some brief knowledge of canvas can do.

Old school space shooter

Controls are simple, with the cursor keys providing left and right directional movement and the space bar responsible for shooting those pesky aliens out of the sky!

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!