Transparent treatment of overlapping parts by overlapping canvas elements

Thank you for your help.

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

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')
varctx=canvas.getContext('2d')

ctx.globalCompositeOperation='xor'
ctx.fillStyle="rgb(200,0,0)"
ctx.fillRect(20,30,60,40)

ctx.fillStyle="rgb(100,0,0)"
ctx.fillRect(60,60,60,40)

.wrapper{
  background-color:#000;
}

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

2022-09-30 13:53

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656