JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Original</h2>
<img id="img" alt=""...

JavaScript

var img = document.querySelector('img'),
    general = document.querySelector('[data-general]').getContext('2d'),
    fast = document.querySelector('[data-fast]').getContext('2d'),
    val = 120,
    start, end,
    generalTextPlaceholder = document.querySelector('[data-timing=general]'),
    fastTextPlaceholder =  document.querySelector('[data-timing=fast]');

start = Date.now();
general.drawImage(img, 0, 0);

var imageData = general.getImageData(0, 0, 400, 299),
    d = imageData.data;
for(var i = 0, l = d.length; i < l; i+=4) {
    d[i] = (d[i] + val);
    d[i + 1] = (d[i + 1] + val);
    d[i + 2] = (d[i + 2] + val);
}
end = Date.now();
generalTextPlaceholder.innerText = 'Done in ' + (end-start) + ' ms';

general.putImageData(imageData, 0, 0);

start = Date.now();
if( val >= 0 ) {
    fast.save();
    fast.fillStyle = "rgb(" + val + "," + val + "," + val + " )";
    fast.fillRect(0, 0, 400, 299);
    fast.globalAlpha = 1;
    fast.globalCompositeOperation = "lighter";
    fast.drawImage(img, 0, 0);
    fast.restore();
} else {
    fast.drawImage(img, 0, 0);
    var imageData = fast.getImageData(0, 0, 400, 299),
    d = imageData.data;
    for(var i = 0, l = d.length; i < l; i+=4) {
        d[i] = (d[i] + val);
        d[i + 1] = (d[i + 1] + val);
        d[i + 2] = (d[i + 2] + val);
    }
    
    fast.putImageData(imageData, 0, 0);
}
end = Date.now();
fastTextPlaceholder.innerText = 'Done in ' + (end-start) + ' ms';