Canvas path hole (counter shape)

[cdaein]

I was trying to create a shape with a hole. With Canvas API, I draw the main shape clockwise, and the counter shape counter-cw.
But it seems PathBuilder from @thi.ng/geom works differently.

If anyone has a tip, I'd appreciate it.

// prettier-ignore
const pts: [number, number][] = [
  [100, 100], [500, 100], [500, 500], [100, 500]
];

// prettier-ignore
const hole: [number, number][] = [
  [300, 200], [200, 400], [400, 400] 
];

// canvas api
pts.forEach((pt, i) => (i === 0 ? ctx.moveTo(...pt) : ctx.lineTo(...pt)));
hole.forEach((pt, i) => (i === 0 ? ctx.moveTo(...pt) : ctx.lineTo(...pt)));
ctx.fillStyle = "yellow";
ctx.fill();

// thi.ng
const path = new PathBuilder({ fill: "white", translate: [200, 200] });
pts.forEach((pt, i) => (i === 0 ? path.moveTo(pt) : path.lineTo(pt)));
hole.forEach((pt, i) => (i === 0 ? path.moveTo(pt) : path.lineTo(pt)));
draw(ctx, path.current());

[postspectacular]

Hey @cdaein - sorry, just saw your question now! Alas, holes are currently not directly supported, neither in paths nor in polygons. For various reasons, only simple boundary representations for now...

[cdaein]

Got it. Thank you for the response!