Automatically Crop HTML5 canvas to contents

Question

Let's say this is my canvas, with an evil-looking face drawn on it. I want to use toDataURL() to export my evil face as a PNG; however, the whole canvas is rasterised, including the 'whitespace' between the evil face and canvas edges.

+---------------+ |               | |               | |     (.Y. )    | |      /_       | |     \____/    | |               | |               | +---------------+ 

What is the best way to crop/trim/shrinkwrap my canvas to its contents, so my PNG is no larger than the face's 'bounding-box', like below? The best way seems to be scaling the canvas, but supposing the contents are dynamic...? I'm sure there should be a simple solution to this, but it's escaping me, with much Googling.

+------+ |(.Y. )| | /_   | |\____/| +------+ 

Thanks!

Answer 1

Edited (see comments)

function cropImageFromCanvas(ctx) {   var canvas = ctx.canvas,      w = canvas.width, h = canvas.height,     pix = {x:[], y:[]},     imageData = ctx.getImageData(0,0,canvas.width,canvas.height),     x, y, index;    for (y = 0; y < h; y++) {     for (x = 0; x < w; x++) {       index = (y * w + x) * 4;       if (imageData.data[index+3] > 0) {         pix.x.push(x);         pix.y.push(y);       }      }   }   pix.x.sort(function(a,b){return a-b});   pix.y.sort(function(a,b){return a-b});   var n = pix.x.length-1;    w = 1 + pix.x[n] - pix.x[0];   h = 1 + pix.y[n] - pix.y[0];   var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);    canvas.width = w;   canvas.height = h;   ctx.putImageData(cut, 0, 0);    var image = canvas.toDataURL();  //open cropped image in a new window   var win=window.open(image, '_blank');   win.focus(); }