Line width looks thinner with p5 vs canvas api

[glenderr]

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

[mnse]

Hi @glenderr,

did you or do you use smooth function ?

Cheers
— mnse

[glv]

Hello,

Related topic:

strokeWeight(1) draws 2 pixel width

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 StrokeWidth() 0 to 20 for points and lines (expand the image for detail): [image]

:)