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

**URL:** https://discourse.processing.org/t/strokeweight-function-behaviour-and-renderers-comparison-p5-js-v-s-processing-java/19510
**Category:** p5.js
**Created:** [April 7, 2020, 5:44pm UTC](https://discourse.processing.org/t/strokeweight-function-behaviour-and-renderers-comparison-p5-js-v-s-processing-java/19510 "2020-04-07T17:44:34Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Lapov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lapov/32/10630_2.png) [@Lapov](https://discourse.processing.org/u/Lapov)
#### Post date: [April 7, 2020, 5:44pm UTC](https://discourse.processing.org/t/strokeweight-function-behaviour-and-renderers-comparison-p5-js-v-s-processing-java/19510/1 "2020-04-07T17:44:34Z")

</div>

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

 ![Screen Shot 2020-04-07 at 8.14.08 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fb3a0909d9c81cc941874f8c57032ad51533afd6.png)

```auto

```

---

<div class="post-metadata">

### Author: ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [April 16, 2020, 2:20am UTC](https://discourse.processing.org/t/strokeweight-function-behaviour-and-renderers-comparison-p5-js-v-s-processing-java/19510/2 "2020-04-16T02:20:43Z")

</div>

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:

> <https://github.com/processing/p5.js/issues/4269>
>
> Most appropriate sub-area of p5.js?
> Color
> Core/Environment/Rendering
> Data
> Events
> Image
> IO
> Math
> Typography
> Utilities
> WebGL
> Other (specify if possible)
> Details about the...

---

<div class="post-metadata">

### Author: ![Lapov](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lapov/32/10630_2.png) [@Lapov](https://discourse.processing.org/u/Lapov)
#### Post date: [September 18, 2020, 7:59am UTC](https://discourse.processing.org/t/strokeweight-function-behaviour-and-renderers-comparison-p5-js-v-s-processing-java/19510/3 "2020-09-18T07:59:32Z")

</div>

> [@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 —](http://github.com/processing/p5.js)

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