Canvas Demos

Ambilight

Andi Smith — Fri, 05 Mar 2010 10:30:11 +0000

Сергей Чикуёнок 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

Andi Smith — Wed, 03 Mar 2010 10:30:00 +0000

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.

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

Andi Smith — Tue, 02 Mar 2010 10:30:21 +0000

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

Andi Smith — Mon, 01 Mar 2010 10:30:22 +0000

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

Andi Smith — Mon, 15 Feb 2010 10:30:22 +0000

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.

Defend!

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.

Slippy Map

Andi Smith — Sun, 14 Feb 2010 10:30:32 +0000

Tim Hutt has created a canvas slippy map. A slippy map is a map that allows you to dynamically pan the map simply by grabbing and sliding the map image in any direction. For this demo, OpenStreetMap tiles are dynamically downloaded using JavaScript and drawn directly onto the canvas.

The east coast of Oz

Comments from the Author:

This is just a demo. It appears to be basically the same as normal slippy maps (e.g. google maps), however there is a lot of potential I haven’t explored. Possibilities include: smooth zooming, complicated map overlays, more shininess, etc.

Creating an RSS Icon

Andi Smith — Sat, 13 Feb 2010 10:30:15 +0000

Michael Strasser has created a tutorial which goes through the steps of creating a RSS icon using the canvas element.

The RSS icon in all it's glory

While I don’t necessarily think that canvas should replace the common image for these kinds of tasks, thanks to the complexity of the RSS icon Michael’s tutorial covers creating quarter circles, gradients and rounded rectanges – all useful skills to know if your starting to learn how to use the canvas element.

Sketchpad

Andi Smith — Fri, 12 Feb 2010 10:30:50 +0000

Sketchpad by Michael Deal uses the canvas element and a lot of JavaScript to create an impressive painting application.

Sketchpad’s drawing tools allow for the usual brush, pencil, fill and text items but it also provides tools for spirographs, unusual shapes and stamps. Applying a pattern to these items is simple, meaning it’s easy to create something artistic even if you’re not particularly artistic yourself.

Not sure if this picture is pretty, or a mess... you decide!

The links along the top right offer more options to improve your image, and once you are happy with your image, you can save it out as a PNG. Give it a try!

QBASIC JS

Andi Smith — Thu, 11 Feb 2010 10:30:45 +0000

QBASIC is an IDE and interpreter for a variant of the BASIC programming language, and Steve Hanov has created an implementation of QBASIC in Javascript. The tool uses canvas to display the screen, which is where your compiled code will eventually end up. Thankfully, Steve has included one of the original QBASIC examples – Nibbles, a variant on the popular Snake game.

More snake action with 'Nibbles'

Steve is currently running a guide of how to implement a virtual machine like QBASIC in JavaScript – and is well worth a read.

Image Washing

Andi Smith — Wed, 10 Feb 2010 10:30:13 +0000

Hernan Amiune has created this interesting ‘image washing’ effect using canvas. The canvas starts blank or ‘dirtied’. Then raindrops fall from the top of the canvas slowly revealing the picture as if water was being used to clean the picture.

Reveal!

Comments from the Author:

The experiment combines a particle system and the image pixels alpha channel to create the effect.