Latest

Digg Attack

What happens when you combine the Digg API with the canvas element? You get a game called Digg Attack, that’s what!

Attack the Diggs!

Attack the Diggs!

Using the mouse to move and aim your heroes; and the control key to fire, your task to shoot down Digg stories as they happen. The more Diggs the story has, the bigger and stronger the enemy it becomes!

Play the Digg Attack game!

Windows Paint

  • Demos
  • Posted on March 15th, 2009

It doesn’t matter how many versions of Windows are released, some things stay the same. Take the functionality of the packaged paint program, for example. With the technology of Paint firmly fifteen years in the past, Christopher Clay has created a clone of the app using the canvas HTML element.

Windows Paint in a canvas

Windows Paint in a canvas

Sadly, Christopher has abandoned this project before all the functionality was completed, but maybe there’s hope someone else will pickup where he left off?

View the Paint demo here

APNG Support Test

  • Tools
  • Posted on March 14th, 2009

For those not in the know, a APNG is a new breed of animated image combining the benefits of PNG images by supporting 24-bit images and 8-bit transparency and the animation abilities of the GIF. The problem is that most browsers don’t support APNG at the moment, so Elijah Grey has written a script which detects if a browser supports the format.

A simple script that utilizes the HTML 5 canvas API in only 9 functional lines of JavaScript to detect if a browser supports APNG images. It can be useful for deciding when to serve a client browser APNG images instead of GIF images. This will set the variable, apng_supported to true if the browser supports APNG.

View  the APNG JavaScript tool, or see it in action to find out whether your browser supports APNG!

Apple iPod Shuffle VoiceOver

  • Demos
  • Posted on March 13th, 2009

We show a lot of demos on the Canvas Demos website which whilst being very cool don’t have much real world use. Apple have found one such real world use for the canvas element, on the pages of the new Apple iPod Shuffle to demonstrate the functionality of the new uber cool voiceover feature.

Apple iPod Shuffle VoiceOver

Apple iPod Shuffle VoiceOver

The page uses Apple’s QuickTime object, which communicates with some JavaScript to draw the animation using the canvas element. Why have Apple used this method? Most likely, it’s due to their love of Quicktime and the lack of Flash support on the iPhone. Regardless, it’s good to see a canvas example out in the wild!

Link to the Apple iPod Shuffle VoiceOver page

Bespin

Over at Mozilla Labs, a new web-based code editor called Bespin has been released as BETA built using the canvas element.

Bespin

Bespin supports syntax highlighting for HTML, CSS and JavaScript; line numbers; large file sizes and increased control of your documents using a command line control.

Spirograph

  • Demos
  • Posted on March 11th, 2009

Who here remembers Spirographs from their younger days? Ben Joffe does, and has created a fantastic spirograph program with the canvas element!

Pretty patterns!

Pretty patterns!

The spirograph lets you configure all kinds of parameters such as the size of the static circle, the mobile circle and the colour of thickness of your brush; and you can save them out as a PNG when you’re done!

View the Spirograph demo and be taken back to a more innocent time!

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!