Question

I have drawn 3 images on a canvas and blended them using this solution, everything is working well and I am very happy but I would like to apply an opacity to the pixels on the canvas – something similar to this method – http://www.patrick-wied.at/blog/how-to-create-transparency-in-images-with-html5canvas which has been tried and didn’t work.

Once the canvas pixels have opacity applied I then need to add in another image layered underneath the translucent pixels and export the whole thing as a png.

Here is my code for the images and blending

  var img1 = document.getElementById("userImage")

  var img2 = document.getElementById('right_cheekImage');
  var img3 = document.getElementById('left_cheekImage');
  var img4 = document.getElementById('left_eyeImage');

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

  var width = img1.width;
  var height = img1.height;
  canvas.width = 644;
  canvas.height = 490;

  context.drawImage(img1,0, 0, width, height);
  var image1 = context.getImageData(0, 0, width, height);
  var imageData1 = image1.data;
  context.drawImage(img2, img2.left, img2.top);
  context.drawImage(img3, img3.left, img3.top);
  context.drawImage(img4, img4.left, img4.top);

  var image2 = context.getImageData(0, 0, width, height);
  var imageData2 = image2.data;

  while (pixels--) {
        imageData1[pixels] = imageData1[pixels] * blendOne + imageData2[pixels] * blendTwo;
  }
  //apply opacity to pixels currently on the canvas
  for(var i=3; i < length; i+=4){
        imageData1[i] = 50;
  }

  image1.data = imageData1;

  //put in userimage again but under others
  context.drawImage(img1,newOffset, topPos, width, height);

  context.putImageData(image1, 0, 0);

As you can see I’ve added in some code to add opacity to the pixels currently on the canvas but it’s not working.

If anyone can shed some light on this that would be amazing.

Answer 1

Just a quick fiddle to show you how to merge different canvasses.

A common technique is to do image manipulation in one canvas and then later draw this invisible canvas into the one you are actually going to display.