JSFiddle - React, Tailwind, and code Playground

by siliconball

HTML

<canvas id="canvas" width="300" height="150"></canvas>
<canvas id="canvas2" width="300" height="150"></canvas>

CSS

body
{
    background-color: black;
}
canvas{    
    border: 1px solid white;
}

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillRect(0,0,300,150);
//context.globalAlpha=1;
//context.globalCompositeOperation = "source-over";


var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');

canvas2.width=canvas2.height=canvas.width;

window.draw = function(){
    var W = canvas2.width;
    var H = canvas2.height;
    context2.fillStyle='rgba(255,255,255,1)';
    context2.fillRect(
        Math.floor(Math.random()*W),
        Math.floor(Math.random()*H),
        2,2);
    context2.fillStyle='rgba(0,0,0,.02)';
    context2.fillRect(0,0,W,H);
    
    context.fillStyle='rgba(0,0,0,1)';
    context.fillRect(0,0,300,150);
    context.drawImage(canvas2,0,0,300,150);
    
    setTimeout('draw()', 1000/20);
}
setTimeout('draw()', 1000/20);

window.thresholdFilter = function () {
    var W = canvas2.width;
    var H = canvas2.height;
    var i, j, threshold = 30, rgb = []
    ,   imgData=context2.getImageData(0,0,W,H), Npixels = imgData.data.length;

    for (i = 0; i < Npixels; i += 4) {
        rgb[0] = imgData.data[i];
        rgb[1] = imgData.data[i+1];
        rgb[2] = imgData.data[i+2];
        if (    rgb[0] < threshold &&
                rgb[1] < threshold &&
                rgb[2] < threshold
        ) {
           imgData.data[i] = 0;
           imgData.data[i+1] = 0;
           imgData.data[i+2] = 0;
        }
    }
    
    context2.putImageData(imgData,0,0);
};

setInterval("thresholdFilter()", 1000);