# Line width looks thinner with p5 vs canvas api

**URL:** https://discourse.processing.org/t/line-width-looks-thinner-with-p5-vs-canvas-api/38764
**Category:** p5.js
**Created:** [September 14, 2022, 11:46pm UTC](https://discourse.processing.org/t/line-width-looks-thinner-with-p5-vs-canvas-api/38764 "2022-09-14T23:46:35Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![glenderr](https://avatars.discourse-cdn.com/v4/letter/g/e480ec/32.png) [@glenderr](https://discourse.processing.org/u/glenderr)
#### Post date: [September 14, 2022, 11:46pm UTC](https://discourse.processing.org/t/line-width-looks-thinner-with-p5-vs-canvas-api/38764/1 "2022-09-14T23:46:35Z")

</div>

I remade an old project that used p5 to do the drawing, and verified that my canvas api drawing functions are no different than p5’s after reading the source. What I’m noticing are that the line widths look slightly thinner with p5 (slightly better too i imo). I looked at both the context and canvas objects in both, and there are no settings that are different, both have ctx.lineWidth = 1.

I’m wondering, is there anything else p5 does under the hood, perhaps it shifts the coordinates by half a pixel to anti-alias differently, or there is some setting I don’t know about? It’s mysterious to me.

Thanks

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [September 15, 2022, 11:42am UTC](https://discourse.processing.org/t/line-width-looks-thinner-with-p5-vs-canvas-api/38764/2 "2022-09-15T11:42:05Z")

</div>

Hi @glenderr,

did you or do you use [smooth](https://p5js.org/reference/#/p5/smooth) function ?

Cheers  
— mnse

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [September 15, 2022, 9:08pm UTC](https://discourse.processing.org/t/line-width-looks-thinner-with-p5-vs-canvas-api/38764/3 "2022-09-15T21:08:12Z")

</div>

Hello,

Related topic:

> [@strokeWeight(1) draws 2 pixel width](https://discourse.processing.org/t/strokeweight-1-draws-2-pixel-width/23425/2):
>
> Hello, My exploration of this with with Google Chrome. My test code: function setup() { print(pixelDensity()); createCanvas(720, 400); background(0); //noSmooth(); translate(50, 0); stroke(255); for (let i=0; i\<21; i++) { strokeWeight(i); line(30\*i, height-50, 30\*i, 50); point(30\*i, 25); } } Reference: [https://p5js.org/reference/#/p5/strokeWeight](https://p5js.org/reference/#/p5/strokeWeight) StrokeWidth() 0 to 20 for points and lines (expand the image for detail): slight_smile

`:)`
