How to put overlapping images on html5 canvas?

If you write an image into a 'workspace' canvas you can go through the image data for that, changing the opacity, just as you have done for the black square. Then write it back to workspace canvas. You can then write it to your main canvas using drawImage.

Here's what I tried on my server, obviously you have to put in a suitable img src to avoid CORS problems. And also make the img and workspace elements visibility:hidden - I've left them visible to show what is going on.

<!DOCTYPE html>
<html>

<body>
img
<img id="img" src="https://rgspaces.org.uk/wp-content/uploads/may-morning-in-lockdown-100x100.jpg"/>
cvs
<canvas id='cvs' width='100' height='100'></canvas>
workspace
<canvas id='workspace' width='100' height='100' style="visibility:visible;"></canvas>
</body>
<script>
window.onload=init;
function init() {
  const size = 50
  const cvs = document.getElementById('cvs')
  const context = cvs.getContext('2d');
  const workspace= document.getElementById('workspace')
  const workspacectx=workspace.getContext('2d');
  const img=document.getElementById('img');

  context.fillStyle = 'rgb(255,0,0,1)';
  context.fillRect(10, 10, size, size);

  workspacectx.drawImage(img,20,20,size,size);

  imgdata=workspacectx.getImageData(20, 20, size, size);
  for (var i=0;i<size*size*4;i+=4) {
    imgdata.data[i+3]=150;//if it already has an opacity 0 you would leave it
  }
  workspacectx.putImageData(imgdata,20,20);
  context.drawImage(workspace,20,20);
}
</script>

</html>

How to put overlapping images on html5 canvas?

Related

Recent Posts