On Firefox, the 1px line() does not align with the 1px line of the rect().

[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.11.0

Web browser and version

Firefox 131, Chrome 130

Operating system

Windows and Linux

Steps to reproduce this

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

Firerox on the left, Chrome on the right:

On Firefox, the 1px line() does not align with the 1px line of the rect().

[orbitalchicken]

And if you translate(0.5, 0.5) before drawing the line and the rectangle,
On Firefox, the line become "pixel perfect" (1px wide on a 100% 1K screen) and the rectangle stroke become 2px wide (not ok).

See the section "Obtaining crisp lines" here: source: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

I think that all shapes, (eg. ellipses, triangles, etc) should be analysed and compared on both Chrome and Firefox.

[MuktiMishra]

@orbitalchicken I tried to reproduce this and to me it appeared perfect , tried the same for triangle as well and it the 1px line was aligned perfectly in both Chrome and Firefox using

function setup() {
  createCanvas(400, 400);
  background(255);
   
  noFill();
  stroke(0);
  strokeWeight(1);
  rect(150, 50, 150, 50);
  line(100, 50, 150, 50);
  triangle(300, 300, 350, 250, 350, 350);
  strokeWeight(1);
  line(200, 200, 350, 350);  
}

In Chrome

In Firefox

[orbitalchicken]

@MuktiMishra Do you use a 4K monitor ?
In this case it's probably normal that you are not going to "see" the problem.

Here's your code on a standard 1K monitor:

Firefox:

Chrome:

[MuktiMishra]

@MuktiMishra Do you use a 4K monitor ? In this case it's probably normal that you are not going to "see" the problem.

Here's your code on a standard 1K monitor:

Firefox:

Chrome:

@orbitalchicken my bad i didn't tried on high resolution monitor

[limzykenneth]

This is not a consistent issue.
On 4K monitor
Firefox (align fine):

Chrome (does not align):

On 1440p monitor
Firefox (does not align):

Chrome (does not align):

As mentioned in #7317 and #7319, these are the behavior coming from the browsers not something we can fix (eg. you have replicated the same behavior using native canvas API). See also #4269 #5662 #5362 and others. This is a same behavior you'll see if you use the underlying graphics engine as well. One way to get around it is to force subpixel drawing by drawing on a .5 increment if alignment is important, we cannot do this by default as it has other unintended effects as well.

[limzykenneth]

Another explanation: https://web.archive.org/web/20200427185029/https://diveintohtml5.info/canvas.html (original site no longer up)

Also if you change the magnification level on your browser, you will see this switch between aligning and not aligning as well (require rerunning the sketch).