Get Bounding Box from HTML canvas
gets the bounding box of text on HTML canvas
HTML
<canvas id="myCanvas" width="800" height="300" style="border:1px solid #d3d3d3; position: absolute;">
Your browser does not support the canvas element.
</canvas>
JavaScript
// draw text
var txt = "Bounding Box";
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "65pt Comic Sans MS";
ctx.fillText(txt,20,170);
// get/draw bounding box
var bbox = getBoundingBox(ctx, 0, 0, 850, 450);
console.log(bbox.width + ' x ' + bbox.height);
drawBoundingBox(ctx, bbox);
// optional: uncomment this to draw text again. If the bounding box calculations
// are off, you will see darker pixes on or outside the bounding box
// ctx.fillText(txt,20,170);
function getBoundingBox(ctx, left, top, width, height) {
var ret = {};
// Get the pixel data from the canvas
var data = ctx.getImageData(left, top, width, height).data;
console.log(data);
var first = false;
var last = false;
var right = false;
var left = false;
var r = height;
var w = 0;
var c = 0;
var d = 0;
// 1. get bottom
while(!last && r) {
r--;
for(c = 0; c < width; c++) {
if(data[r * width * 4 + c * 4 + 3]) {
console.log('last', r);
last = r+1;
ret.bottom = r+1;
break;
}
}
}
// 2. get top
r = 0;
var checks = [];
while(!first && r < last) {
for(c = 0; c < width; c++) {
if(data[r * width * 4 + c * 4 + 3]) {
console.log('first', r);
first = r-1;
ret.top = r-1;
ret.height = last - first - 1;
break;
}
}
r++;
}
// 3. get right
c = width;
while(!right && c) {
c--;
for(r = 0; r < height; r++) {
if(data[r * width * 4 + c * 4 + 3]) {
console.log('last', r);
right = c+1;
ret.right = c+1;
break;
}
}
}
// 4. get left
c = 0;
while(!left && c < right) {
for(r = 0; r < height;...