HTML 5 Canvas Animation

As canvas comes closer and closer to replicating the features of Flash; canvas-based cartoons are beginning to appear. Starting with this one, featuring two characters called Tomte and Goat; who explain how you can make your own cartoons in canvas!

A taste of things to come?

A taste of things to come?

The animation is nice and smooth with a couple of nice effects. Flash, get your coat, your number is (almost) up!

View the HTML5 Canvas Animation cartoon

Canvas Text Backwards Compatibility

  • Tools
  • Posted on October 8th, 2009

Fabien Ménager has created a Canvas Text Javascript library which implements the three methods used to draw text on the canvas element (strokeText, fillText and measureText) to the browser versions which don’t already support it. That’s the Firefox 2/3.0, Internet Explorer 6+, Opera 9+, Safari 3.x and Chrome 1.0 browsers in the group.

Fabien discusses his aim when building the library:

The main goal of this implementation is to respect the specs given by the W3C and WHATWG for the HTML5 <canvas> tag.

Canvas Text doesn’t change the already implemented functions in Firefox 3.5+, Safari 4 and Chrome 2+ as these are already to spec and doesn’t require any other library except ExCanvas for Internet Explorer.

Sweet, sweet canvas text

Sweet, sweet canvas text

Provided with the tool on the Canvas Text codebase are some examples of it working using positioning, animation, transformations and to show performance.

Check out the Canvas Text tool

Many Lines

The name Many Lines describes this canvas demo perfectly – this application will draw many lines on and around your cursor. The application, developed by Eric Ishii Eckhardt, uses a particle system to draw the lines following your mouse around the screen.

Good luck trying to make anything as pretty as this!

Good luck trying to make anything as pretty as this!

This demo works well in Chrome, Firefox 3.5 and Opera 10.

View the Many Lines demo

Dive into HTML5 Canvas

Mark Pilgrim is currently writing a book on the joys of HTML 5 and how developers can “dive in” to the new features.

One of the first chapters to surface in Mark’s draft is all about canvas; explaining all about our favourite element and how to start using it. Everything is explained simply and therefore this tutorial is perfect for beginners.

Drawing with canvas requires concentration

Drawing with canvas requires concentration

The tutorial is a work in progress, so check back to see the whole chapter take shape. Dive in to HTML 5 will eventually be published by O’Reilly, but it will also remain online for free.

View the canvas tutorial

Matrix Rain

The Matrix was a great film, wasn’t it? Its sequels, not so much.

Mike Hatfield has created a simple proof-of-concept Matrix rain effect rendered in canvas. The effect uses images borrowed from Thomas John’s original Matrix Fall screensaver and a motion blur generated in code by not completely clearing the frame on each cycle.

Take the red pill, try the demo

Take the red pill, try the demo

Firefox 3.5 seems to be the best browser to use for the effect. Safari and Chrome seem to struggle having I difficulty running the demo at an acceptable speed. Mike would love to hear feedback on how he can get the demo running more efficently if anyone has any suggestions?

Check out the demo

JS Wars

  • Games
  • Posted on October 2nd, 2009

Combining HTML 5 elements canvas, audio and video, JS Wars by Jonas Wagner is a classic shoot ‘em up showing how built in browser technology is getting closer and closer to replicating what Flash can do.

The mission in JS Wars is simple: Find and destroy Dr. Skull! The enemies consist of flying eyes which will shoot at you at any given opportunity; and mines which start harmless but as you progress begin to glow red and home in on your position. There are a couple of power ups to make your experience a slightly more fair one – missiles come in packages of 5s, while nukes will blow up everything on the screen (except you).

Either I'm not very good, or Dr Skull doesn't exist...

Either I'm not very good, or Dr Skull doesn't exist...

Click on the game to activate the keys. Navigate the menus with the arrow keys and enter or space.
You can control your ship using the arrow keys. Press space to fire your primary weapon or control to fire a power up.

Works best in Firefox 3.5 or Chrome.

Play JS Wars – a score of 2,760 to beat, people!

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!