webGL Curves show weird behaviour

[diyaayay]

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

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:

1. 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()
}

[orrkislev]

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

[valkyriedimension]

The first sketch posted in the bug report gives the described behavior on my machine as well. (Windows 11, Firefox 129.0.1, Chrome 128.0.6613.114)

[diyaayay]

I have the same behavior in multiple browsers where I tried the sketches. Thanks, @valkyriedimension for sharing the outputs.