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();">Tint me!</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++) {
        var average = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2]) /3;
        // set red green and blue pixels to the average value
        pixels[i*4] = average;
        pixels[i*4+1] = average+30;
        pixels[i*4+2] = average;
    }
    ctx.putImageData(imageData, 0, 0);
}
</script>

JavaScript

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


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