Bug when using many beginShapes() inside beginClip()

[Zoda390]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

1.11.1

Web browser and version

Chrome 132.0.6834.160

Operating system

Windows 10

Steps to reproduce this

Steps:

1. Begin Clip
2. Create a shape with beginShape() and endShape()
3. Throw in a circle
4. End Clip

Snippet:

var myImg;
function preload(){
  myImg = loadImage("dirt_walls.png");
}

function setup() {
  createCanvas(400, 400);
  noSmooth();
}

function draw() {
  background(220);
  
  beginClip();
  beginShape();
  vertex(100,100);
  vertex(200,100);
  vertex(200,200);
  vertex(100,200);
  endShape();
  beginShape();
  vertex(200,150);
  vertex(300,150);
  vertex(300,250);
  vertex(200,250);
  endShape();
  
  circle(200,250,50);
  
  endClip();
  
  image(myImg,0,0);
}

It looks like the circle is moving the vertex from the second shape over:

This is the reason I want it fixed, I'm using marching squares with beingShape() to clip an image:

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[Zoda390]

Similar to #7158

[Zoda390]

At least for my game I fixed the issue, was my fault not p5's, but the example I showed was fixed by your code :)

[Forchapeatl]

@Zoda390 , please help us with your fixed code.