# Custom shape not filled correctly with WEBGL

**URL:** <https://discourse.processing.org/t/custom-shape-not-filled-correctly-with-webgl/4631>\
**Category:** Coding Questions\
**Created:** [October 19, 2018, 11:06am UTC](https://discourse.processing.org/t/custom-shape-not-filled-correctly-with-webgl/4631 "2018-10-19T11:06:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![UnGast](https://avatars.discourse-cdn.com/v4/letter/u/3bc359/32.png) [@UnGast](https://discourse.processing.org/u/UnGast)\
**Post date:** [October 19, 2018, 11:06am UTC](https://discourse.processing.org/t/custom-shape-not-filled-correctly-with-webgl/4631/1 "2018-10-19T11:06:12Z")

</div>

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/](https://editor.p5js.org/)

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [October 19, 2018, 1:38pm UTC](https://discourse.processing.org/t/custom-shape-not-filled-correctly-with-webgl/4631/2 "2018-10-19T13:38:59Z")

</div>

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

```javascript
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/565fa6619f6b32dfbbf5513392e0180407933d48.png)

```javascript
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d8c9be084e5c2d4ae5794ea050af036be2a0a784.png)

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

In motion: [https://editor.p5js.org/abe/sketches/B1691vDi7](https://editor.p5js.org/abe/sketches/B1691vDi7)

Maybe related?

> <https://github.com/processing/p5.js/issues/2804>