Is there a way to use erase() within SVG graphics?

[twonyn]

Im to create a pattern with transparency within p5.js but using rasterised shapes slowed down the browser too much so I opted for p5.js-svg. Sadly I cannot figure out how to create a circular cutout.

Within standard p5 I would do this:

symbol = createGraphics(100,100);  
symbol.fill('blue');  
symbol.rect(0,0,100,100);  
symbol.erase();  
symbol.ellipse(50,50,80,80);  

and then paste that Graphic over the canvas.

But using an SVG Graphics, erase() only makes the area white and not transparent. I also tried importing an svg and changing the fill attribute but can't seem to make that happen within a Graphics container.

I tried some things out within the sketch below but none of them work properly. https://editor.p5js.org/lichtelucas/sketches/LYju8KThw

Thanks in advance!

[zenozeng]

@twonyn Unfortunately, I have not thought of a good way to achieve this function. It’s white because svgcanvas‘s current implement clearRect by adding a rect element, see also: https://github.com/zenozeng/svgcanvas/blob/main/context.js#L839