# Anti-aliased edges in WEBGL mode in p5js

**URL:** <https://discourse.processing.org/t/anti-aliased-edges-in-webgl-mode-in-p5js/33524>\
**Category:** Coding Questions\
**Created:** [November 15, 2021, 5:19am UTC](https://discourse.processing.org/t/anti-aliased-edges-in-webgl-mode-in-p5js/33524 "2021-11-15T05:19:35Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![ippsketch](https://avatars.discourse-cdn.com/v4/letter/i/838e76/32.png) [@ippsketch](https://discourse.processing.org/u/ippsketch)\
**Post date:** [November 15, 2021, 5:19am UTC](https://discourse.processing.org/t/anti-aliased-edges-in-webgl-mode-in-p5js/33524/1 "2021-11-15T05:19:35Z")

</div>

Shape edges are jagged in p5js WEBGL mode compared to the default 2D mode.  
smooth() and setAttributes(‘antialias’,true) did not work or improve this.  
Does anyone know how to achieve clean anti-aliased edges for p5js WEBGL shapes?  
Here is an example output:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/144b9657142f6c0634ed36fd0591a2adbbe1ace2.png)  
Here is the code:

```auto
function setup (){
  createCanvas(100,100,WEBGL) //left image
  //createCanvas(100,100) //right image
  noStroke();
}
function draw(){
  // translate(50,50) //right image only
  background(255)
  fill(0)
  rotate(PI/3)
  rectMode(CENTER)
  rect(0,0,67,67)
}

```