title: change color of image to greyscale in html5
body: <p>I have a png image which I want to convert into grey scale. I managed to convert it into greyscale however it also changes the color for transparent ares of the image. <strong>How can I change its color without changing the transparent area of the image?</strong></p>
  
  <pre><code>var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var img = new Image();
  img.src = 'image.png';
  ctx.drawImage(img, 0, 0);
  
  var imageData = ctx.getImageData(0, 0, 420, 420);
  var px = imageData.data;
  
  var len = px.length;
  
  for (var i = 0; i &lt; len; i+=4) {
      var redPx = px[i];
      var greenPx = px[i+1];
      var bluePx = px[i+2];
      var alphaPx = px[i+3];
  
      var greyScale = redPx * .3 + greenPx * .59 + bluePx * .11;
  
      px[i] = greyScale;
      px[i+1] = greyScale;
      px[i+2] = greyScale;
      px[i+3] = greyScale;
  }
  
  ctx.putImageData(imageData, 0, 0);
  </code></pre>