canvas transparency

canvas.js

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

containerWidth = window.innerWidth;
containerHeight = 90;

// set width/height
context.canvas.width = containerWidth;
context.canvas.height = containerHeight;

// set image
image = new Image();
imageWidth = containerWidth;
imageHeight = containerHeight*2;
image.onload = function() { context.drawImage(image, 0, 0, imageWidth, imageHeight) }
image.src = '<?php echo $sourceImage ?>';

// get image pixels
imgData = context.getImageData(0, 0, imageWidth, imageHeight);
pixels = imgData.data;

i = 0;
length = pixels.length;

// Loop over each pixel and invert the color.
while(i<length) {
  red = pixels[i];
  green = pixels[i+1];
  blue = pixels[i+2];

  greyRgb = '239:239:239';
  currentRgb = red+':'+green+':'+blue;

  if(i < 100)
  {
    log(['RGB', greyRgb, currentRgb, pixels[i+3]]);
  }

  if(greyRgb == currentRgb) {
    pixels[i+3] = 0;
  }

  // next pixel
  i += 4;
}

// Draw the
context.putImageData(imgData, 0, 0);