Animated GIF in HTML5 canvas

Question

In HTML5, how can I draw easily (no too much complex code please) an animated GIF in a canvas that works (with drawImage only first frame is shown in the canvas)

Answer 1

For anyone still having trouble with this, or those who don't want to load their images dynamically or figure out how many frames they need to use;

Leave the animated GIF on the HTML page, set to display:block, visibility:visible, and position:relative in the CSS. Dynamically position it under the canvas with a negative margin-top/z-index (or what have you). Then set a JavaScript timer that calls drawImage repeatedly, as fast as you need in order to refresh the image properly.

If the image is not visible in the DOM, the drawImage routine cannot acquire subsequent frames of the animation. If the image is absolutely positioned under the canvas, the rendering lags.