Latest

Slither

Slither is a rather impressive snake game from Erik Johnson. As with most snake games, the object of the game is to eat all the food whilst avoiding obstacles such as walls and poison.

The game uses the canvas element to draw the main game area – including the snake player and walls as well as the food, poison and upgrade items. Everything else uses standard CSS2 techniques and jQuery animations.

Slither

Slither

Comments from the Author:

An innovative approach to the classic Snake/Nibbles genre using Canvas. It employs a unique combination of components to drive the game, with very good performance on a number of systems. There are several challenges, including walls, poison items, and upgrades, for a total of 7 levels.

Akihabara

Francesco Cottone has created a HTML5 games library for making pixel based games using Javascript and the CANVAS tag. Akihabara is composed of a number of libraries that use HTML5 canvas tag and some standard hooks.

Akihabara

Pink Link

The libraries include:

  • Gamebox – which handles object rendering, movements, collisions and grouping; as well as keyboard movements.
  • Gamecycle – which provides a complete set of generic game properties, such as menus, fades and game over screens.
  • Toys – which provides common routines such as effects, HUD handling, jumping characters, bullets .etc.
  • Help – which provides JavaScript specific functions such as copying, randomising, string/array handlers .etc.
  • Tool – which contains some simple tools, such as a cel-composer which can compose an image stacking a set of frames for animating, applying filters where necessary.
  • Trigo – which contains mathematical calculations for moving objects.
  • Iphopad – which handles touch devices such as iPhone and Android.

Comments from the Author:

The Akihabara which you can download here [..] is a set of libraries, tools and presets to create pixelated indie-style 8/16-bit era games in Javascript that runs in your browser without any Flash plugin, making use of a small small small subset of the HTML5 features, that are actually available on many modern browsers.

The author has included a number of games with his library, which can be played using the keyboard. From some reason, the Z key is the A button, the X key is the B button and the C key is the C button.

3D Space Craft

Tsujimoto has created this 3D Space Craft experiment in the HTML5 canvas element.

Space Shuttle

Flying through the air

Best viewed in Chrome.

Liquid Particles

Daniel Puhe has created this interesting liquid motion particle demo. There are two flavours: the traditional dots and letters.

Liquid Particles

Liquid lettering

Move your mouse around the page to have the particles follow the cursor, click the mouse button to send the particles flying in the other direction.

Best viewed in Chrome.

3D Earth

Peter Nederlof has created this highly detailed model of a 3D rotating Earth complete with cloud eco system.

3D Earth

A Canvas view of the World

Comments from the Author:

This demo shows the earth, using a collada file for the mesh and texture map, and a custom animated texture.

Catch It

Catch It by Robert Eisele is an unusual puzzle game where you have to guide the red circle to the red box without touching any of the grey circles. Each time you reach a red box, it relocates and another grey circle appears. Clicking in the game area reverses the direction of the grey circles.

Catch It

Get the red circle to the red box

Robert’s highest score is 145.

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!