画布（带盖bg的属性globalCompositeOperation）

Question

How to make a mask so that the picture was on the background of another picture?

I comment out the line because of that it's not working properly http://jsfiddle.net/LZY5A/5

If the example no pictures refresh the page

Code from the jsFiddle:

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

var imageObj = new Image();
var imageObj2 = new Image();
var bg = new Image();
imageObj.src = 'http://codepo8.github.io/canvas-masking/centerblur.png';
imageObj2.src = 'http://codepo8.github.io/canvas-masking/red-panda.jpg';
bg.src = 'http://s5.goodfon.ru/image/391868-3318x2212.jpg';



setInterval(loop, 17);

function loop() {
  // ctx.drawImage(bg, 0, 0, 500,500); // It should be behind

  ctx.drawImage(imageObj, 100, 100, 100,100);
  ctx.globalCompositeOperation = 'source-atop';
  ctx.drawImage(imageObj2, 100, 100, 100,100);
}

Answer 1

You can use destination-over compositing to draw your background behind your knockout effect:

Example code and a Demo: http://jsfiddle.net/m1erickson/Uyz7Y/

ctx.drawImage(imgs[0], 100, 100, 100,100);
ctx.globalCompositeOperation = 'source-atop';
ctx.drawImage(imgs[1], 100, 100, 100,100);
ctx.globalCompositeOperation="destination-over";
ctx.drawImage(imgs[2],0,0);
ctx.globalCompositeOperation="source-over";  // reset to default compositing

BTW, your loop is unnecessary...