JSFiddle - React, Tailwind, and code Playground

by Darker

HTML

<img alt=""...

JavaScript

//Wtf is that? - comes from http://stackoverflow.com/a/4276742/607407
[].slice.apply(window.document.images).filter(is_gif_image).map(freeze_gif);
//Of course only works when extension is valid
function is_gif_image(i) {
    //Overriden to accept base64animation
    return true || /^(?!data:).*\.gif/i.test(i.src);
}

function freeze_gif(i) {
    var c = document.createElement('canvas');
    //Hopefully will get the correct dimensions
    var w = c.width = i.width;
    var h = c.height = i.height;
    var ctx = c.getContext('2d');
    //Create black background
    ctx.beginPath();
    ctx.rect(0, 0, w, h);
    ctx.fillStyle = 'black';
    ctx.fill();
    ctx.closePath();
    //Try to draw still gif
    try {
      ctx.drawImage(i, 0, 0, w, h);
      //Draw a black overlay overlay to make GIF darker
      ctx.beginPath();
      ctx.rect(0, 0, w, h);
      ctx.fillStyle = 'rgba(0,0,0,0.3)';
      ctx.fill();
      ctx.closePath();
    }
    catch(e) { 
      //I plan to add some CORS warning here, but it isn't necessary
    }
    //Draw a circle
    ctx.beginPath();
    ctx.arc(w/2, h/2, Math.min(60, w/2-4, h/2-4), 0, 2 * Math.PI, false);
    ctx.fillStyle = 'rgba(0,180,0,0.5)';
    ctx.fill();
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'red';
    ctx.stroke();
    ctx.closePath();
    //Draw a triangle in it
      //???
          
    //Remember the original source
    var original = i.src;
    
    //Temporary change to a static image
    var stoped = i.src = c.toDataURL("image/gif");
    
    var toggle = false; //Toggle variable
    //Onclick event to play
    i.onclick = function() {
      if(toggle=!toggle)
        this.src = original;
      else
        this.src = stoped;
    }    
}