Transparent treatment of overlapping parts by overlapping canvas elements

Asked 3 months ago, Updated 3 months ago, 11 views

Thank you for your help.

<canvas id="c1">
<canvas id="c2">

Overlap the canvas elements as described above and draw the background image on c1
Would it be possible to install c2 on top of c1 to create a state where the two overlap (the background color of the parent DIV is visible)?

I saw that one canvas is possible with the globalCompositeOperation source-out, but
I have a question because I would like to freely place c2 with absolute attributes.

We are currently investigating this method, so we don't have the source code yet...

javascript html5-canvas

2022-09-30 13:53

1 Answers

I think it is possible to place the image in one canvas and implement globalCompositeOperation with xor.
It's not an image, but I hope it will be helpful.

 varcanvas= document.getElementById('c')


<div class="wrapper">
  <canvas id="c" width="200" height="200">/canvas>

2022-09-30 13:53

If you have any answers or tips

© 2023 OneMinuteCode. All rights reserved.