JSFiddle - React, Tailwind, and code Playground

by IceCreamYou

HTML

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

JavaScript

var canvas = document.getElementById('canvas'), context = canvas.getContext('2d');
context.fillRect(100, 50, 100, 100);

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) {
            if (x < xl) xl = x;
            if (x > xr) xr = x;
            if (y < yt) yt = y;
            if (y > yb) yb = y;
        }
    }
}
var shrink = document.createElement('canvas'), sC = shrink.getContext('2d');
shrink.width = xr - xl;
shrink.height = yb - yt;
sC.drawImage(canvas, xl, yt, xr-xl, yb-yt, 0, 0, xr-xl, yb-yt);
document.getElementById('after').appendChild(shrink);
shrink.style.border = '1px solid red';