0
182
ViewsHow to make only two shapes compost together in HTML canvas without effecting other shapes
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:
2 answers
Answer question0
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.
0
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