p5.js webGL Curves show weird behaviour

Most appropriate sub-area of p5.js?

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

p5.js version

v1.10.0

Web browser and version

Chrome: 128.0.6613.113 (Official Build) (64-bit)

Operating system

Windows 11

Steps to reproduce this

Steps:

Sketch:

function setup() {
  createCanvas(400, 400, WEBGL)
}

function draw() {
  background(255)
  stroke(0)
  strokeWeight(20)
  beginShape()
  vertex(-40, -40)
  bezierVertex(40, -40, -40, 40, 40, 40)
  endShape()
}

Expected behaviour: (This works fine in v1.8)

Current Behaviour:

I'm not too sure but it seems like this disappearing of drawing only exists in curves that are turned in terms of the direction. For Example: The sketch below renders correctly:

function setup() {
  createCanvas(400, 400, WEBGL);
  background(255)
  noFill()
  stroke(0)
  strokeWeight(20)
  translate(-width/2, -height/2)
  beginShape()
  vertex(20, 20)
  quadraticVertex(
    280, 200,
    100, 380
  )
  endShape()
}

Sep 02 '24 19:09 diyaayay

what you are seeing is the white fill color - use a different fill color or a different backgorund color and you'll see it clearly

but still it shouldnt look like that.. the fill color should be behind the stroke I couldnt replicate your issue on my macbook, in a few browsers

try this sketch, that lets you draw the curves with mouse clicks https://editor.p5js.org/orrkislev/sketches/Vn096iYyA see if you could replicate this behavior