Latest

Blob Sallad

Those of you who have played Loco Roco may be able to find some similarities between that game and this tech demo. Blob Sallad, created by Bjoern Lindberg, is essentially a physics demo with the ability to split, join, drag and drop the blobs.

Blob Sallad

Blob Sallad

View the Blob Sallad demo

Colorscube

Dean McNamee has created a 3D cube full of the colours of the rainbow using canvas. The cube itself is semi-transparent throughout and can be rotated for those nice to see corner viewing angles.

Colorscube is a simple mapping of the RGB colorspace into 3d. A little bit of alpha goes a long way. Try it in black.Colorscube is a simple mapping of the RGB colorspace into 3d. A little bit of alpha goes a long way. Try it in black.

Colorscube

Colorscube

View the Colorscube

Twitch

Twitch is a series of minimal games set within small windows using the canvas element created by C.E.B. Reas. As you complete each puzzle, a new window will open with a new puzzle. All puzzles can be solved by clicking the mouse at the correct times.

Twitch

Twitch

How fast can you solve them all? Each game only responds to clicking; mouse position and keyboard are ignored.

Works best in Chrome or Safari 4.

Play Twitch

World of Goo Cursor

Sometimes the simplest ideas are the best. Darren Moore quite liked the main menu cursor in the hit WiiWare game World of Goo… so much so, he decided to make a copy of it using canvas!

Have a goo at the demo

Have a goo at the demo

World of Goo is a wicked game and well worth the $20! The game has a simple but cool cursor so I thought I’d have a goo at replicating it with HTML5 Canvas.

View the World of Goo Cursor canvas demo!

Canvas Text

  • Tools
  • Posted on March 30th, 2009

The canvas element is great for drawing, but when it comes to text there’s quite a bit missing – e.g. everything. Jim Studt has created a JavaScript plugin called canvas text which extends the canvas context by adding some extra options.

Fortunately the 1960s has come to the rescue. A. V. Hershey created a set of simple vector fonts for pen plotters which were released by the US National Institute of Standards (NIST). The code presented here encodes the printable 7-bit ASCII characters in a javascript file with a handful of functions to add text operations to the canvas element.

Canvas Text

Canvas Text adds the following methods to context:

  • ctx.drawText / ctx.drawTextRight / ctx.drawTextCenter: Draw text in the specified font and size at the position (baseline).
  • ctx.measureText: Return the width of the text if it were drawn with the current settings.
  • ctx.fontAscent / ctx.fontDescent: The ascent / descent from the baseline.

Find out more about the Canvas Text tool

Canvas Tests

Phillip Green has created a useful testing site for canvas showing what is possible in each browser engine. The site contains 672 tests for everything from size to transformations, gradients to shadows. These tests also generate a report chart giving a quick guide for each rendering engine’s support.

A list of support

A list of support

For each test, a green background indicates success, red indicates failure, blue indicates a need to manually confirm the output is as expected.

View the list of tests, or check out the results

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!