strokeWeight() function behaviour and renderers comparison. p5.js v/s Processing Java

Hi there!

I am trying to switch from Processing 3 to p5.js.
I am ok with everything but dissatisfied a bit with quality of geometry lines/edges rendering. It seems that it vary significantly in standard Processing P2D rendered and p5.js P2D in browser.

For example, I have two same very basic sketches (screenshot attached): one written in Processing Java Mode, second - in p5.js mode. While both sketches call strokeWeight(1) - in Processing P2D renderer shape’s borders looks much sharper and thiner then in a browser canvas where borders looks more pale and fatter.
Indeed, it seems that strokeWeight(1) in p5.js canvas looks like strokeWeight(2) in Processing P2D renderer…

Does anybody have suggestions how to reach nearly the same quality in lines/edges rendering in p5.js P2D as it is in Processing P2D?

I would really appreciate any help.

1 Like

For sharpness, you might want to try strokeWeight(0.5) offsetting coordinates by +0.5 as a way to counteract subpixel rendering. For a discussion, see this bug report on the p5js github repo:


Thank you for your help and pointing me at interesting deep discussion about Canvas specifics.

1 Like