How to get a shape that covers the entire canvas with a void as the original shape (inversion)

Question

I'm trying to get, by the initial coordinates (I put down the points myself, see the image below), in fact, to get a figure that will become a kind of emptiness for the new one. So that the new one covers the entire canvas, having a void inside in the form of the original shape. I use d3-voronoi for this.

const pixelPoints = zone.points!.map((point) => ({
  x: point.x * canvas.width,
  y: point.y * canvas.height
}));

if (pixelPoints.length > 0) {
  const voronoiLayout = voronoi()
    .extent([[0, 0], [canvas.width, canvas.height]]);

  interface Point {
    x: number;
    y: number;
  }

  const points: [number, number][] = pixelPoints.filter(point => 'x' in point && 'y' in point).map((point: Point) => [point.x, point.y]);

  const polygons = voronoiLayout.polygons(points);

  const outerPolygon = polygons.find(polygon => {
    return polygon.every(([x, y]) => {
      console.log(x, canvas.width, y, canvas.height, x >= 0 && x <= canvas.width && y >= 0 && y <= canvas.height);
      return x >= 0 && x <= canvas.width && y >= 0 && y <= canvas.height;
    });
  });

  if (outerPolygon) {
    ctx.beginPath();
outerPolygon!.forEach(([x, y], i) => {
  if (i === 0) {
    ctx.moveTo(x, y);
  } else {
    ctx.lineTo(x, y);
  }
});
ctx.closePath();
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fill();

[![The initial points that I put down][1]][1]

[Array(2), Array(2), Array(2), Array(2)]
(2) [549, 529]
(2) [553, 420.00000000000006]
(2) [722, 428]
(2) [710.0000000000001, 548]
length: 4

[![What is obtained][2]][2]

But I need to get, in fact, a new figure (with coordinates, which is important), which would have a void in the form of the original figure. What am I doing wrong? [1]: https://i.stack.imgur.com/kpeLa.jpg [2]: https://i.stack.imgur.com/z20FJ.jpg

How to get a shape that covers the entire canvas with a void as the original shape (inversion)

0 Answers0