Developers can now use Flash to build assets and animation that target platforms such as HTML5 Canvas and WebGL. And adding JavaScript allows for playback on just about any modern desktop or mobile device. Download HTML5 Canvas for free. An extension of GWTCanvas widget to allow leveraging all of the features of the HTML 5 canvas element, like drawing text and shadows. Depends on browser support for the canvas element.

1. Html5 Canvas Animation Example Download Youtube Free
2. Html Canvas Animation
3. Javascript Canvas Animation

Html5 Canvas Animation Example Download Youtube Free

Is it possible to give an end user the ability to save as a single file an animation created client side with HTML5 Canvas - other than saving the entire HTML of the page?

There are plenty of tutorials on how to save as PNG, but the animation is lost in these cases.

GeorgeUGeorgeU

2 Answers

There is not an 'easy' way to do this.

Here is a similar question...Grabbing each frame of an HTML5 canvas

You could follow this approach and grab the frames and submit these to a server-side script to compile them into an animated GIF.

Another option, though non-trival, would be to implement a pure JavaScript GIF encoder. The GIF specification can be found here, http://graphcomp.com/info/specs/gif89a.txt

If the color table stays the same in each frame, you could probably splice together the frames from already encoded GIF urls without having to compress the pixel level data. You would still need to decode the base64 stream from Canvas.toDataURL.

You could use mjbuilder, it's a library that alllows you to save canvas frames into a mpeg file. But it has issues and it only works on Firefox.

Html Canvas Animation

Paul FournelPaul Fournel

Javascript Canvas Animation

Not the answer you're looking for? Browse other questions tagged html5-canvas or ask your own question.