Fill function is not working for certain orientations in WEBGL

[isaacvr]

When I combine lines and curves, there are certain orientations where the fill function doesn't work properly. In the example below, I draw that shape (that is one of the stickers of the Ivy cube) horizontally and it doesn't fill the shape, but vertically it does. What is happening here?

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Color
• Core/Environment/Rendering
• Data
• Dom
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Details about the bug:

• p5.js version: 1.1.9
• Web browser and version: Firefox 80.0 and Chrome 84.0.4147.135
• Operating System: Windows 10
• Steps to reproduce this:

function setup() {
  createCanvas(500, 500, WEBGL);
}

function draw() {
  background(255);

  translate(width / 2, height / 2);
  rotateX(PI / 6);

  stroke(0, 0, 0);
  strokeWeight(2);
  fill(255, 0, 0);

  beginShape();
  vertex(100, 0, 0);
  vertex(0, 0, 0);
  vertex(0, 0, 100);
  quadraticVertex(0, 0, 0, 100, 0, 0);
  endShape(CLOSE);
}

If we change the last vertex to (0, 100, 0), it works.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[blechdavier]

What do you mean by changing the last vertex to (0, 100, 0)? Like the last vertex(), or something in the quadraticVertex(), or...

[blechdavier]

Ohhhh... You just have to comment out the translate() on line 8, and change the quadraticVertex() on line 19 to quadraticVertex(0, 100, 0, 100, 0, 0);

[vulongphan]

I would like to work on this issue

[Qianqianye]

Thanks @vulongphan I just assigned you.

[davepagurek]

Hi! This should be fixed as of #5914, so I'm going to close this for organizational purposes. This is not yet released, but once the next p5 version is out (greater than 1.5.0), feel free to open this again if you notice any further issues!