JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="150" height="150" style="border: 1px solid black"></canvas>
<p>
<button type="button" onclick="grayscale();">Reduce my colors!</button>
</p>

<script>
    function grayscale() {
    // you have to put the onclick part here because jsfiddle is silly
    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++) {
        pixels[i*4] = pixels[i*4] - (pixels[i*4] % 32);
        pixels[i*4+1] = pixels[i*4+1] - (pixels[i*4+1] % 32);
        pixels[i*4+2] = pixels[i*4+2] - (pixels[i*4+2] % 32);
    }
    ctx.putImageData(imageData, 0, 0);
}
</script>

JavaScript

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


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