Latest

Flashy Tetris

Bruno Garcia has created a canvas version of everyone’s favourite Russian puzzle game, Tetris.

Flashy Tetris

Tetris as we know and love

The game uses a haXe scene graph engine called Easel that easily allows for rich animation and flashy effects.

Three

Mr Doob has created a 3D engine library called “three”. Currently the engine only supports particles and triangles/quads with flat colors.

Comments from the Author:

The aim is to keep the code as simple and modular as possible. At the moment the engine can render using <canvas> and <svg>. WebGL rendering would come at a later stage but feel free to fork the project and have a go. Although this allows 3D for iPhoneOS and Android platforms the performance on these devices is not too good.

Three

threeD

Using the library is as simple as including it on your page with a normal JavaScript include for access to the engine classes and methods.

Read the rest of this entry »

Nebula Cloud

Professor Cloud has created this demonstation of a 3D nebula effect with swirling smoke and pulsating colours using the canvas element.

Nebula Cloud screenshot

Swirly

Comments from the Author:

The effect is created by layering three images, derived from a larger single bitmap source, that fade in and out while increasing in scale. The non-repeating nature of the effect is created by having a larger bitmap than the view area and choosing a random texture offset.

Video Destruction

Sean Christmann has created this fantastic demo of HTML5 video exploding on the screen using canvas. Clicking the playing video will shatter it, sending pieces everywhere. After a short period, the fragments will rebuild the video.

During the video, click to explode

Comments from the Author:

Don’t ask me why, but copying pixel data out of a video tag is expensive, so expensive that drawing it into a temporary canvas, and then drawing pieces of that temp canvas onto a final canvas is faster then just referencing the video tag repeatedly within the same loop. That’s why you’ll see 2 Canvases in the source code for the demos.

Video Destruction works best with Chrome or Safari.

Thrust

Thrust by Jon Combe is a rewrite of the classic 80s 8-bit computer game using JavaScript and canvas. Everything within the game space (such as the planet surface, ship, enemies, fuel tanks, etc) is dynamically drawn using canvas.

Thrust isn't for the casual gamer

In Thrust you must shoot the enemies before they shoot you; pick up the fuel; shoot the reactor repeatedly until it starts counting down and then collect the pod to escape the planet. Controls are: Z and X to rotate left and right; the enter key to fire, shift to thrust and space to use shields.

Tweet Flare

Nikhil Bobb has produced this interested HTML5 canvas visualisation based on real time tweets from around the world using Twitter’s geocode data. Each tweet sets off a flare, lighting up areas of activity on Earth.

Lighting up the sky with tweets

Lighting up the sky with tweets

The map is draggable, and you can double click to zoom in.

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!