キャンバスで遊び中 - 描画されている範囲をえる

JS

getImageData!!

http://www.fujidig.com/misc/js/canvas/trim.html

var canvas = document.body.appendChild(document.createElement('canvas'));
canvas.width = 200;
canvas.height = 200;

var ctx = canvas.getContext('2d');

for(var i = 0; i < 3; i++) {
	ctx.beginPath();
	ctx.arc(Math.random()*(canvas.width-60)+30,
	        Math.random()*(canvas.height-60)+30,
	        30,
	        0,
	        Math.PI*2,
	        true);
	ctx.stroke();
}


var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = data.data;
var i = 0;
var minX, maxX;
var minY, maxY;
var w = data.width;
for(var y = 0, h = data.height; y < h; y ++) {
	var lineMinX = undefined, lineMaxX = undefined;
	for(var x = 0; x < w; x ++) {
		if (pixels[i+3]) {
			if (lineMinX === undefined) { lineMinX = x; }
			lineMaxX = x;
		}
		i += 4;
	}
	if (minX === undefined || minX > lineMinX) {
		minX = lineMinX;
	}
	if (maxX === undefined || maxX < lineMaxX) {
		maxX = lineMaxX;
	}
	if (lineMinX !== undefined) {
		if (minY === undefined) { minY = y; }
		maxY = y;
	}
}

x = minX, y = minY, w = maxX - x + 1, h = maxY - y + 1;
ctx.strokeStyle = 'red';
ctx.strokeRect(x - 1 + 0.5, y - 1 + 0.5, w + 1, h + 1);
ctx.globalCompositeOperation = 'destination-over';
ctx.fillStyle = 'rgba(255,0,0,0.1)';
ctx.fillRect(x, y, w, h);