strokeWeight(1) draws 2 pixel width

p5.js
1

While playing with some basic stuff, I found that some of my drawings seemd to be off. After some fiddling, I found that if I use strokeWeight(1), the line or rect has in fact a width of 2 pixels. I tried Firefox and Chrome and I used 2 different computer (Win10 home, Win10 Pro) and it was always the same. Even when using the examples from the reference page showed the same behaviour.

strokeWeight(1);
stroke(255,0,0);
rect(20, 20, 60, 60);
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

StrokeWidth() 0 to 20 for points and lines (expand the image for detail):

image
image729Ă—408 3.19 KB

:)

3

maybe the usage of noSmooth() let’s the 2nd pixel disappear.

4

Using smooth() or noSmooth() makes no difference. Always 2 pixel width when using strokeWeight(1).

Playing with the code from glv, I found that an odd line width results in a line that is one pixel to wide: strokeWeight(3) draws a line with 4 pixel width, strokeWeight(4) does the same. strokeWeight(5) draws a line with 6 pixel and so on.

2 Likes
5

Just found an older version of p5.js (from 2018) on my laptop at work and tried the same: There the line width is okay, so it seems that this is really an issue with (never version of) p5.js and not related to the browser. Question is just if this in on purpose or is it a bug (or is it a setting)

6

Hello,

What version?
I would like to try this.

You can open the p5.js file with an editor and it will tell you in the first line.

:)

7

I checked: The “flawed” version is from
https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js

The old local copy I found that draws the lines as I expect (and need) is p5.js v0.7.2 September 02, 2018

1 Like
8

My code example above with a couple of different versions of p5.js:

https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js:

image
image722Ă—402 3.15 KB

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js

image
image722Ă—403 3.08 KB

Expand the pictures to compare them.

Something is not right with the p5.js 1.1.9 version.

:)