JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<canvas id="c" width="200" height="138"></canvas>

CSS

* {
    margin:0;
    padding:0;
    border:0;
    background:#000
}

body {
    overflow:hidden
}

#c {
    position:relative
}

JavaScript

var

img, cnv, ctx,

resizeCanvas = function() {
    var
    w = window.innerWidth ? 
        window.innerWidth : 
        (document.documentElement.clientWidth ? 
            document.documentElement.clientWidth : 
            document.body.offsetWidth),
    h = window.innerHeight ? 
        window.innerHeight : 
        (document.documentElement.clientHeight ? 
            document.documentElement.clientHeight : 
            document.body.offsetHeight),
    imgRatio = 200/138,
    winRatio = w/h;
    
    if (winRatio>imgRatio) {
        cnv.style.width = w.toString() + 'px';
        cnv.style.height = Math.round(w/imgRatio).toString() + 'px';
        cnv.style.left = '0';
        cnv.style.marginLeft = '0';
    } else if (winRatio<imgRatio) {
        cnv.style.width = Math.round(h*imgRatio).toString() + 'px';
        cnv.style.height = h.toString() + 'px';
        cnv.style.left = '50%';
        cnv.style.marginLeft = Math.round(-h*imgRatio/2).toString() + 'px';
    } else {
        cnv.style.width = w.toString() + 'px';
        cnv.style.height = h.toString() + 'px';
        cnv.style.left = '0';
        cnv.style.marginLeft = '0';
    }
},

draw = function() {
    ctx.drawImage(img, 0, 0);

    var 
    input = ctx.getImageData(0, 0, cnv.width, cnv.height),
    output = ctx.createImageData(cnv.width, cnv.height),
    w = input.width, 
    h = input.height;

    for (var i=0; i<w*h*4; i+=4) {
        var r = (Math.random()*5+5)/10.01;
        output.data[i] = Math.floor(input.data[i]*r);
        output.data[i+1] = Math.floor(input.data[i]*r);
        output.data[i+2] = Math.floor(input.data[i]*r);
        output.data[i+3] = 255;
    }
    ctx.putImageData(output, 0, 0);
};

window.onload = function() {
    cnv = document.getElementById('c');
    ctx = cnv.getContext('2d');
    
    img = new Image();
    img.style.position = "absolute";
    img.style.left = "-9999px";
    document.body.appendChild(img);
    img.onload = function() {
       ...