Counting Pixels JS Fiddle, Output not working?

Question

I've updated my question. What I'm trying to do with JS Fiddle is count color pixels & alpha pixels from a given image from a URL link. Originally it was only counting from a simple drawn shape.

The script now loads an image from a URL, but the #output part of this script doesn't work. It seems that it's not seeing the image at all, where it counts the pixels. More information can be found at the new JS Fiddle here. Also updated JavaScript code can be found just below this.

May I please get help on this? Thank you, it's most appreciated. =)

var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'https://cdn-icons-png.flaticon.com/128/590/590836.png';
  base_image.onload = function(){
    context.drawImage(base_image, 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));

Original code below:

JavaScript:

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));

HTML:

</canvas>

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

CSS:

  background: #fff;
}

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

canvas { 
  border: 1px solid red;

}

Answer 1

I figured out the answer to my post. ^_^ I found an answer on another posting, which worked out for the script. So all is solved. You can find it here: transparency with alpha mask

The updated JS Fiddle is here: New

Also the newest JavaScript code below:

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

var image = new Image();
image.crossOrigin = "Anonymous";

var imagesLoaded = 0;

image.onload = function() {
  imagesLoaded++;
  ctx.drawImage(image, 0, 0);
  if (imagesLoaded == 2) {
    process();
  }
};
image.src = 'https://cdn-icons-png.flaticon.com/128/590/590836.png';

var maskCanvas = document.createElement('canvas');
maskCanvas.width = canvas.width;
maskCanvas.height = canvas.height;
var maskCtx = maskCanvas.getContext('2d');

var mask = new Image();
mask.crossOrigin = "Anonymous";
mask.onload = function() {
  imagesLoaded++;
  maskCtx.drawImage(mask, 0, 0);
  if (imagesLoaded == 2) {
    process();
  }
};
mask.src = 'https://cdn-icons-png.flaticon.com/128/590/590836.png';

function process() {


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

var nrTotal = maskCanvas.width * maskCanvas.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));
}