JSFiddle - React, Tailwind, and code Playground

by IceCreamYou

HTML

<canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>

JavaScript

var canvas = document.getElementById('canvas'), context = canvas.getContext('2d');
context.fillStyle = '#BBBBBB';
context.fillRect(100, 50, 100, 100);
var mergeColor = [68, 138, 253];

var d = context.getImageData(0, 0, canvas.width, canvas.height), data = d.data;
var xl = canvas.width-1, xr = 0, yt = canvas.height-1, yb = 0;
for (var y = 0; y < canvas.height; y++) {
    for (var x = 0; x < canvas.width; x++) {
        var i = ((canvas.width*y)+x)*4;
        var r = data[i], g = data[i+1], b = data[i+2], a = data[i+3];
        if (a > 0) {
            data[i] = Math.min(255, Math.max(0, (data[i]-mergeColor[0])/510));
            data[i+1] = Math.min(255, Math.max(0, (data[i+1]-mergeColor[1])/510));
            data[i+1] = Math.min(255, Math.max(0, (data[i+1]-mergeColor[2])/510));
        }
    }
}
context.putImageData(d, 0, 0, 0, 0, d.width, d.height);