strokeWeight(1) appears as 2 pixels for a rectangle.

[orbitalchicken]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

1.10

Web browser and version

Firefox 131 on Windows, Chrome 130 on Linux and Windows

Operating system

Windows, Linux

Steps to reproduce this

Steps:

1. draw a rectangle with a strokeWeight of 1 px.
2. PR0BLEM: The rectangle have a 2px stroke.

Snippet:

function setup() {
  createCanvas(400, 400);
    
  strokeWeight(1)
  rect(50,50,50,50);
}

[perminder-17]

I was working on my Windows system, but I'm unable to replicate the issue. Could you clarify how it's supposed to appear? For me, a 1px stroke appears lighter, while a 2px stroke looks slightly bolder. So, using a strokeWeight of 1px does not produce a rectangle with a 2px stroke.

[orbitalchicken]

@perminder-17
You replicated the issue, in your first screenshot.
The problem is that the 1px stroke appears lighter and is as wide as the 2px stroke.
The 1px stroke should be black and only 1 pixel wide (half the width of a 2px stroke).
You can use the Processing.org editor to compare the resulting image.

Also, the stroke width problem is the same with line().

[davepagurek]

Thanks for filing an issue!

The issue, I think, is that lines are centered about the vertices of the rectangle. If you have a 2px wide line, and a vertex is at an integer, then the left and the right side of the line is also at an integer (±1). If you have a 1px wide line, then the edges of the line will both be halfway through a pixel (±0.5), so antialiasing causes it to show up on both pixels, with around half opacity.

The key thing here is to take into account the positioning of lines if you want pixel-precision strokes. Here are two lines, one adjusted so the edges of the stroke are not halfway across a pixel, and the other is misaligned, causing the effect you see:

function setup() {
  createCanvas(400, 400)
  pixelDensity(1)
  background(200)
  line(100.5, 0, 100.5, 400)
  line(300, 0, 300, 400)
}

(Live: https://editor.p5js.org/davepagurek/sketches/NKkNBNv-R)

Antialiasing of lines is a fundamental aspect of the underlying 2D JavaScript canvas that we can't turn off. For this reason, we aren't currently planning to do any workarounds to match how a non-JavaScript-canvas renderer might look.