# strokeWeight(1) draws 2 pixel width

**URL:** <https://discourse.processing.org/t/strokeweight-1-draws-2-pixel-width/23425>\
**Category:** p5.js\
**Created:** [August 22, 2020, 11:05am UTC](https://discourse.processing.org/t/strokeweight-1-draws-2-pixel-width/23425 "2020-08-22T11:05:53Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![FunThomas](https://avatars.discourse-cdn.com/v4/letter/f/f1d935/32.png) [@FunThomas](https://discourse.processing.org/u/FunThomas)\
**Post date:** [August 22, 2020, 11:05am UTC](https://discourse.processing.org/t/strokeweight-1-draws-2-pixel-width/23425/1 "2020-08-22T11:05:53Z")

</div>

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.

```auto
strokeWeight(1);
stroke(255,0,0);
rect(20, 20, 60, 60);

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 22, 2020, 12:45pm UTC](https://discourse.processing.org/t/strokeweight-1-draws-2-pixel-width/23425/2 "2020-08-22T12:45:36Z")

</div>

Hello,

My exploration of this with with Google Chrome.

My test code:

```auto
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](https://p5js.org/reference/#/p5/strokeWeight)

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

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/773f495b9d0106d209800f34a6bd07f487721cd0.png)

`:)`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [August 22, 2020, 10:07pm UTC](https://discourse.processing.org/t/strokeweight-1-draws-2-pixel-width/23425/3 "2020-08-22T22:07:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![FunThomas](https://avatars.discourse-cdn.com/v4/letter/f/f1d935/32.png) [@FunThomas](https://discourse.processing.org/u/FunThomas)\
**Post date:** [August 23, 2020, 6:34pm UTC](https://discourse.processing.org/t/strokeweight-1-draws-2-pixel-width/23425/4 "2020-08-23T18:34:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![FunThomas](https://avatars.discourse-cdn.com/v4/letter/f/f1d935/32.png) [@FunThomas](https://discourse.processing.org/u/FunThomas)\
**Post date:** [August 24, 2020, 8:44am UTC](https://discourse.processing.org/t/strokeweight-1-draws-2-pixel-width/23425/5 "2020-08-24T08:44:14Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 24, 2020, 11:19am UTC](https://discourse.processing.org/t/strokeweight-1-draws-2-pixel-width/23425/6 "2020-08-24T11:19:26Z")

</div>

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.

`:)`

---

<div class="post-metadata">

**Author:** ![FunThomas](https://avatars.discourse-cdn.com/v4/letter/f/f1d935/32.png) [@FunThomas](https://discourse.processing.org/u/FunThomas)\
**Post date:** [August 24, 2020, 2:36pm UTC](https://discourse.processing.org/t/strokeweight-1-draws-2-pixel-width/23425/7 "2020-08-24T14:36:37Z")

</div>

I checked: The “flawed” version is from  
[https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js](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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 24, 2020, 11:07pm UTC](https://discourse.processing.org/t/strokeweight-1-draws-2-pixel-width/23425/8 "2020-08-24T23:07:21Z")

</div>

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:](https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js:)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ebea482373232a5693a7ccd5ab4443c75c31026c.png)

[https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js](https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js)

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/5ecdc778a25eea6b8620070b50dfa43d4f2bd0f2.png)

Expand the pictures to compare them.

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

`:)`