Animated Gif in HTML5 Canvas

Generate animated GIF with HTML5 canvas

Canvas can't generate (animated) GIFs. You need to use a JavaScript library to do so.

There is jsgif, a JS library to generate animated GIFs:
http://github.com/antimatter15/jsgif

This blog post explains the usage:
http://antimatter15.com/wp/2010/07/javascript-to-animated-gif/

How to save canvas animation as gif or webm?

In modern browsers you can use a conjunction of the MediaRecorder API and the HTMLCanvasElement.captureStream method.

The MediaRecorder API will be able to encode a MediaStream in a video or audio media file on the fly, resulting in far less memory needed than when you grab still images.

const ctx = canvas.getContext('2d');var x = 0;anim();startRecording();
function startRecording() {  const chunks = []; // here we will store our recorded media chunks (Blobs)  const stream = canvas.captureStream(); // grab our canvas MediaStream  const rec = new MediaRecorder(stream); // init the recorder  // every time the recorder has new data, we will store it in our array  rec.ondataavailable = e => chunks.push(e.data);  // only when the recorder stops, we construct a complete Blob from all the chunks  rec.onstop = e => exportVid(new Blob(chunks, {type: 'video/webm'}));    rec.start();  setTimeout(()=>rec.stop(), 3000); // stop recording in 3s}
function exportVid(blob) {  const vid = document.createElement('video');  vid.src = URL.createObjectURL(blob);  vid.controls = true;  document.body.appendChild(vid);  const a = document.createElement('a');  a.download = 'myvid.webm';  a.href = vid.src;  a.textContent = 'download the video';  document.body.appendChild(a);}
function anim(){  x = (x + 1) % canvas.width;  ctx.fillStyle = 'white';  ctx.fillRect(0,0,canvas.width,canvas.height);  ctx.fillStyle = 'black';  ctx.fillRect(x - 20, 0, 40, 40);  requestAnimationFrame(anim);}

<canvas id="canvas"></canvas>

How to use gif image inside html5 canvas?

Quote from jsgif: A GIF player in JavaScript

Unfortunately, the DOM doesn't expose individual frames of a GIF, so
this is done by downloading the GIF (with XMLHttpRequest), parsing it,
and drawing it on a .

Maybe you would take a look in the jsgif source code to find some ideas

How to use putImageData with animated gifs using HTML5 canvas and Javascript?

As this page points out, you can use drawImage() to draw the GIF on the canvas, and at the moment it'll draw the current frame from the GIF in Gecko and WebKit -- but not in Opera, and also not according to the spec, so it's not a good idea to rely on this behavior. As far as I know there's no way to get individual frame data from the DOM; I looked into this for a while before writing jsgif (which was mentioned in another answer, but isn't really meant for any sort of practical use as it is -- it's very inefficient, for one).

If you can get away with unpacking the frames on the server and then animating them manually (e.g. like Gmail does), that might be your best option.

Export Canvas as .gif image

This will answer your question. In short, try console.log'ing your data, and, not all browsers will support writing to a gif.

Placing GIF file in HTML5 canvas lose animation

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 positionfunction 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>

animated gifs not playing in browser under html5

You cannot as canvas doesn't provide any methods to deal with animated gifs. You should split gif into single frames then create a spritesheet and animate it copying current frame.

Credit: https://stackoverflow.com/a/9278770/283863

What does a spritesheet looks like? It looks like this:

---

Related Topics