Custom shape not filled correctly with WEBGL

p5.js Coding Questions
1

When executing this in the default canvas mode, the “notch” in the shape is displayed correctly. But in webgl mode the whole shape is filled like a rectangle. Is it not possible to draw such shapes in webgl?

https://editor.p5js.org/

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

function draw() {
	background(220);
	fill(100);
	beginShape();
	vertex(0, 0, 0);
	vertex(0, 30, 0);
	vertex(60, 30, 0);
	vertex(60, 0, 0);
	vertex(50, 0, 0);
	vertex(40, 30, 0);
	vertex(20, 0, 0);
	endShape(CLOSE);
}
2

Very weird. Looks like a bug. It depends on the order of the points:

function setup() {
	createCanvas(150, 100, WEBGL);
	smooth();
}

function draw() {
	background(220);
	fill(100);
	beginShape();
	vertex(1, 1);
	vertex(30, 15);
	vertex(60, 2);
	vertex(61, 30);
	vertex(1, 35);
	endShape(CLOSE);
}

a

function setup() {
	createCanvas(150, 100, WEBGL);
	smooth();
}

function draw() {
	background(220);
	fill(100);
	beginShape();
	vertex(30, 15);
	vertex(60, 2);
	vertex(61, 30);
	vertex(1, 35);
	vertex(1, 1);
	endShape(CLOSE);
}

b

Notice I just move the first point to be the last one.

In motion: https://editor.p5js.org/abe/sketches/B1691vDi7

Maybe related?