How to make only two shapes compost together in HTML canvas without effecting other shapes

user_17380347 0
Viewed 46

So my goal is simple... I think. I want to draw a rectangle with a hole cut out in the middle. But I don't want that hole to go through anything else on the canvas. Right now I have something like this:

context.fillStyle = 'blue';
    context.fillRect(0, 0, width, height);

    context.fillStyle = "#000000";
    context.beginPath();
    context.rect(0, 0 , width, height);
    context.fill();
    enter code here

    context.globalCompositeOperation="destination-out";

    context.beginPath();
    context.arc(width / 2, height / 2 , 80, 0, 50);
    context.fill();

But this also cuts through the background as well, how would I make it only cut through the black rectangle and nothing else?

Visual Example in case I'm not explaining well:

Visual Example in case im not explaining well

html5-canvas javascript
2 Answers

Is this what you were hoping to achieve?

const context = document.getElementById("canvas").getContext('2d');
const width = 100;
const height = 100;
const circleSize = 30;

context.fillStyle = "black";
context.fillRect(0, 0 , width, height);

context.beginPath();
context.arc(width / 2, height / 2, circleSize, 0, 2 * Math.PI);
context.clip();

context.fillStyle = "blue";
context.fillRect(0, 0, width, height);
<canvas id="canvas"/>

This article might be useful:
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing

In the example above, I'm using clip. As the documentation states:

The CanvasRenderingContext2D.clip() method of the Canvas 2D API turns the current or given path into the current clipping region.

This means that any element added to the context after this line, will only be drawn within that clipped path.

user_21490930

Take a look at this see if that is what you are looking for:

<canvas id="canvas" width="200" height="160"></canvas>

<script>
  class Shape {
    constructor(x, y, width, height, color) {
      this.color = color
      this.path = new Path2D();
      this.path.arc(x, y, height / 3, 0, 2 * Math.PI);
      this.path.rect(x + width / 2, y - height / 2, -width, height);
    }

    draw(ctx) {
      ctx.beginPath();
      ctx.fillStyle = this.color;
      ctx.fill(this.path);
    }
  }

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  shapes = [];
  shapes.push(new Shape(40, 40, 80, 80, "blue"));
  shapes.push(new Shape(60, 65, 70, 70, "red"));
  shapes.push(new Shape(80, 40, 65, 65, "gray"));

  shapes.forEach((s) => {
    s.draw(ctx);
  });
</script>

I'm using a Path2D() because I had a quick example from something I did before, but that should be doable without it too. The theory behind is simple, we just want to fill the opposite on the circle.

I hard coded the radius to a third of the height, but you can change all that to something else or even be a parameter the final user can change

user_75998330
Related