CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
danielm2402
danielm2402

Reputation: 788

How to remove intersection of two transparent shapes on canvas?

I want to remove the intersection of two shapes, I understand that to do this I can use the XOR operation. the problem is that I need these two shapes to be transparent. By making the two shapes transparent the intersection is not eliminated.

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.fillStyle = "red";
   ctx.fillRect(20, 20, 75, 50);
   ctx.fillStyle = "blue";
   ctx.globalCompositeOperation = "xor";
   ctx.fillRect(50, 50, 75, 50);

   ctx.fillStyle = "rgba(255,0,0,0.5)";
   ctx.fillRect(150, 20, 75, 50);
   ctx.fillStyle = "rgba(40,23,0,0.5)";
   ctx.globalCompositeOperation = "xor";
   ctx.fillRect(180, 50, 75, 50);

</script>

</body>
</html>

Note: In the real problem it is not possible for me to generate an image, as proposed here

Upvotes: 0

Views: 469

Answers (1)

A Haworth
A Haworth

Reputation: 36467

A simple (possibly simplistic, but it works) way of clearing pixels in overlapping images is to draw each image on its own canvas as well as on the main canvas.

We can then go through the main canvas pixel by pixel clearing any pixel which is in both images, even if it has only very slight opacity.

   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
    
   ctx.fillStyle = "rgba(255,0,0,0.5)";
   ctx.fillRect(150, 20, 75, 50);
   ctx.fillStyle = "rgba(40,23,0,0.5)";
   ctx.globalCompositeOperation = "xor";
   ctx.fillRect(180, 50, 75, 50);
   
   var c1 = document.createElement('canvas');
   var ctx1 = c1.getContext("2d");

   ctx1.fillStyle = "rgba(255,0,0,0.5)";
   ctx1.fillRect(150, 20, 75, 50);  
   
   var c2 = document.createElement('canvas');
   var ctx2 = c2.getContext("2d");
   
   ctx2.fillStyle = "rgba(40,23,0,0.5)";
   ctx2.fillRect(180, 50, 75, 50);
   let imgData = ctx.getImageData(0, 0, 300, 150);

   for (let i=0; i < 300; i++) {
     for (let j = 0; j < 150; j++) {
     //clear the pixel if both images have opacity>0 there
       if (ctx1.getImageData(i, j, 1, 1).data[3] && ctx2.getImageData(i, j, 1, 1).data[3] ) {
         ctx.clearRect(i, j, 1, 1);       
       }
     }
   }
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

Upvotes: 1

Related Questions