Count (non)transparent pixels on canvas

by Arjan Haverkamp

HTML

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

<div id="output">
</div>

CSS

body {
  background: #fff;
}

#output {
  background: #ddd;
  color: #000;
  padding: 5px;
}

canvas { 
  border: 1px solid red;
}

JavaScript

var width = 300, height = 300;

var $canvas = $('#canvas');
var ctx = $canvas[0].getContext('2d');

ctx.fillStyle = '#0f0';
ctx.fillRect(10,10,10,10);
ctx.fillStyle = 'rgba(0,0,0,0.4)';
ctx.fillRect(100,100,100,100);
ctx.font = 'bold 32px Times';
ctx.textBaseline = 'top';
ctx.fillStyle = 'red';
ctx.fillText('Lorem ipsum', 0,0);



// Count number of transparent pixels.
// get bitmap
var idata = ctx.getImageData(0, 0, width, height),            // area to analyze
    buffer32 = new Uint32Array(idata.data.buffer),   // use 32-bit buffer (faster)
    i, len = buffer32.length;

var nrTotal = width * height;
var nrTransparent = 0;
for(i = 0; i < len; i++) {
  if (0 === buffer32[i] & 0xffffff) {
     nrTransparent++;
  }
}

$('#output').html('Total: ' + nrTotal + '<br>Transparent: '+nrTransparent + '<br>Non-transparent: '+ (nrTotal-nrTransparent));