1px stroke line is 2px wide, lines are offset by 0.5 px and should not

[orbitalchicken]

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [X] 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.11.0

Web browser and version

Firefix 131, Chrome 130

Operating system

Linux Mint

Steps to reproduce this

Steps:

1. draw a 1 pixel wide horizontal line Result: the line seams to be offset by 0.5 px and should not

Snippet:

function setup() {
  createCanvas(200, 200); 
  background(255); 
  strokeWeight(1);
  line(50, 10, 100, 10);
  rect(100, 10, 10, 10);
}

[orbitalchicken]

Related to #7319

[davepagurek]

Lines in p5, as you mention, are centered on the points you specify rather than aligning the corner. Centered lines are intentional, so we're currently not planning on changing this behaviour. You can check out the workaround I mentioned in https://github.com/processing/p5.js/issues/7319#issuecomment-2424970907 for alternatives.

[orbitalchicken]

On Firefox, the 1px line() does not align the 1px line of the rect(). Firerox left, Chrome right:

    p.background(255);
    p.noFill();
    p.stroke(0);
    p.strokeWeight(1);
    p.rect(150, 50, 150, 50);
    p.line(100, 50, 150, 50);

[davepagurek]

Do you see the same effect with native canvas drawing?

function setup() {
  createCanvas(400, 400);
  background(255);
  noFill();
  stroke(0);
  strokeWeight(1);
  
  // p5:
  rect(150, 50, 150, 50);
  line(100, 50, 150, 50);
  
  translate(0, 200)
  
  // Native:
  drawingContext.beginPath()
  drawingContext.rect(150, 50, 150, 50)
  drawingContext.stroke()
  drawingContext.beginPath()
  drawingContext.moveTo(100, 50)
  drawingContext.lineTo(150, 50)
  drawingContext.stroke()
}

Live: https://editor.p5js.org/davepagurek/sketches/gp1QxPr5L

If so, I would consider this a bug in the different browsers' renderers as opposed to a p5 bug.

[orbitalchicken]

Yes, exact same thing.