JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="c" width="84" height="48"></canvas>

JavaScript

/// Using easyCanvasJS for setup (http://easyCanvasJS.com)
/// Not required for demo code
var ez = document.getElementById('c');//new easyCanvas(500, 400),
    ctx = ez.getContext('2d'),
    canvas = ez,
    img = document.createElement('img');
ez.onclick=function(){
 window.open(canvas.toDataURL('image/bmp'));
}
img.onload = function() {

    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    var data = ctx.getImageData(0, 0, canvas.width, canvas.height),
        buffer = data.data,
        len = buffer.length,
        threshold = 127,
        i = 0,
        lum;
    
    for(; i < len; i += 4) {
        lum = buffer[i] * 0.3 + buffer[i+1] * 0.59 + buffer[i+2] * 0.11;
        lum = lum < threshold ? 0 : 255;
        
        buffer[i] = lum;
        buffer[i+1] = lum;
        buffer[i+2] = lum;
    }
    ctx.putImageData(data, 0, 0);    

    window.open(canvas.toDataURL('image/bmp'));
}

img.crossOrigin = 'anonymous';
img.src = 'http://i.imgur.com/pwIeNEJ.gif';