JSFiddle - React, Tailwind, and code Playground

by ihope

HTML

<p>
<button type="button" onclick="exposeIt();">expose it!</button>
</p>
<canvas id="canvas1" width="640" height="400" style="zoom:0.75"></canvas>

<script>
    function exposeIt() {
    var can = document.getElementById('canvas1');
    var ctx = can.getContext('2d');
    
    var imageData = ctx.getImageData(0,0,can.width, can.height);
    var pixels = imageData.data;
    var numPixels = pixels.length;
    
    ctx.clearRect(0, 0, can.width, can.height);
    
    for (var i = 0; i < numPixels; i++) {
        var average = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2])/3;
        if (average < 32  &&  average > 2) {
         // red-it :)
                 pixels[i*4] = 255 ;
                 pixels[i*4+1] = 0;
                 pixels[i*4+2] = 0;
        };
    }
    ctx.putImageData(imageData, 0, 0);
}
</script>

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');


var img = new Image();
img.src =...