Placing GIF file in HTML5 canvas lose animation - html5-canvas

Question

I am trying to place .gif file(with anmation let say helicopter),I am able to place it in canvas but the rotating blades doesnt work.
Let me know what am I missing.
jsfiddle: jsfiddle.net/sajesh1985/ptsdvbrt/
Thanks
Sajesh

Answer 1

Your fiddle is showing use of a gif, but in either case:
A SVG file with a SMIL animation can be driven directly by the browser when the SVG is part of the DOM.
When you use drawImage() with SVG as a source the SVG will need to be rasterized, and when that happens the animations are ignored and the SVG is drawn in its initial position. When drawn the rasterized pixels are blended in with whatever other pixels already exists - there is no separation as canvas is just a bitmap.
The same applies to gif files, only the first frame is taken into consideration.
The solution is to prepare a sprite-sheet which contains the frames you want to animate. Draw a frame from it at the desired interval.
var isvg = document.getElementById("svg").outerHTML;
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var svg = new Blob([isvg], {type: "image/svg+xml;charset=utf-8"});
var url = URL.createObjectURL(svg);
var img = new Image();
img.onload = draw;
img.src = url;
// this will always draw the SVG in initial position
function draw() {
setInterval(function() {
ctx.drawImage(img, 0, 0)
}, 33);
}
canvas {border: 1px solid #000}
<canvas id=canvas width=300 height=100></canvas><br>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
<rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
<circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
<animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
</circle>
</svg>