JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<h4>1. Calc boundingbox of non-transparent pixels<br>2. Calc radius that contains that boundingbox</h4>

<canvas id="canvas" width=300 height=300></canvas>

CSS

body {
    background-color: ivory;
    padding:20px;
}
#canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.translate(.5, .5);

var img = new Image();
img.crossOrigin = "anonymous";
img.onload = start;
img.src = "https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sprite.png";

function start() {

    var cw = canvas.width;
    var ch = canvas.height;

    ctx.drawImage(img, cw / 2 - img.width / 2, ch / 2 - img.height / 2);

    var data = ctx.getImageData(0, 0, cw, ch).data;
    var leftX = getLeft(data, cw, ch);
    var rightX = getRight(data, cw, ch);
    var topY = getTop(data, cw, ch);
    var bottomY = getBottom(data, cw, ch);
    var w = rightX - leftX;
    var h = bottomY - topY;
    var cx = leftX + w / 2;
    var cy = topY + h / 2;
    var radius = Math.sqrt(w * w + h * h) / 2;

    ctx.beginPath();
    ctx.arc(leftX + w / 2, topY + h / 2, radius, 0, Math.PI * 2);
    ctx.closePath();
    ctx.stroke();

    ctx.strokeRect(leftX, topY, w, h);

}

function getLeft(data, width, height) {
    for (var x = 0; x < width; x++)
    for (var y = 0; y < height; y++) {
        if (data[(width * y + x) * 4 + 3] > 0) {
            return (x);
        }
    }
}

function getRight(data, width, height) {
    for (var x = width - 1; x >= 0; x--)
    for (var y = height - 1; y >= 0; y--) {
        if (data[(width * y + x) * 4 + 3] > 0) {
            return (x);
        }
    }
}

function getTop(data, width, height) {
    for (var y = 0; y < height; y++)
    for (var x = 0; x < width; x++) {
        if (data[(width * y + x) * 4 + 3] > 0) {
            return (y);
        }
    }
}

function getBottom(data, width, height) {
    for (var y = height - 1; y >= 0; y--)
    for (var x = width - 1; x >= 0; x--) {
        if (data[(width * y + x) * 4 + 3] > 0) {
            return (y);
        }
    }
}