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

[Lapov]

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.
Thanks!
L

[jeremydouglass]

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:

Line is too thick

[Lapov]

@jeremydouglass

GitHub - processing/p5.js: p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

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