Multiple images clipped on source-in on canvas

ojsglobal 0
Viewed 25

I have a clipping mask, and I want two images to be added to it, but I can only get one to show.

 <canvas id='toilet_roll' width="900" height="1500"></canvas>
<script>
   var  design = 'http://dr.schwartzer.uk/paper1.png',
clip = 'http://dr.schwartzer.uk/roll_mask.png',
objImg = new Image(),
objImg2 = new Image(),
objMask = new Image(),
canvas = document.getElementById('toilet_roll'),
ctx = canvas.getContext("2d"),
x = 0,
y = 0;

function animate() 
{
  
  ctx.drawImage(objMask, 0, 0, 900, 1500);  
  ctx.globalCompositeOperation = 'source-in';

  ctx.drawImage(objImg2, 0, y, 900, 1500);
  ctx.drawImage(objImg, 0, (y+200), 900, 1500);

}

objImg.src = design;
objImg2.src = design;

objMask.src = clip;

objMask.onload =  animate;
</script>

...but only the second image (objImg2) is clipped, objImg doesn't show at all.

Can anyone shed some light on what I'm doing wrong?

html5-canvas canvas javascript
1 Answers

I found if I swapped it round to be destination-in, and have the mask last, it worked:

     ctx.drawImage(objImg, 0, y, 900, 1500);
  ctx.drawImage(objImg2, 0, (y+500), 900, 1500);
  
  ctx.save();
  ctx.globalCompositeOperation = 'destination-in'; 
  
  ctx.drawImage(objMask, 0, 0 , 900, 1500);  
  ctx.restore();
ojsglobal0
Related