Different behavior of lines between Safari and Chrome

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
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

No response

Web browser and version

Chrome: 109.0.5414.119 (Official Build); Safari: 16.2 (18614.3.7.1.5)

Operating System

Mac – Ventura 13.1

Steps to reproduce this

Steps:

1. Run in Chrome.
2. Run in Safari.
3. Notice the breaks between lines in Safari – Chrome seems to handle this differently.

I would expect this to behave without the breaks. When using "round" or "square" for the lineCap this doesn't seem to be an issue.

Snippet:

let w, h, sdh, sdw;
function setup() {
  w = windowWidth * 9;
  h = windowHeight * 16;
  sdw = w / 9;
  sdh = h / 16;
  noiseSeed(10);
  createCanvas(sdw, sdh);
}

function draw() {
  background(220);
  let rpWidth = sdw / 2;
  let rpHeight = sdh / 2;
  let yoff = 1000;
  let inc = 0.2;

  drawingContext.lineCap = "butt";
  strokeWeight(sdw / 100);

  for (let cY = 0; cY < rpHeight; cY += sdh / 100) {
    beginShape();
    for (let x = 0; x < rpWidth; x += (1 / 801) * sdw) {
      let y = noise(yoff);
      let mapY = map(y, 0, 1, 0, 1);
      // print(mapY);
      vertex(x, mapY + cY + sdh / 2);
      yoff += inc;
    }
    endShape();
  }
  noLoop();
}

Start by running the supplied sketch in Chrome 109 and Safari 16.2 on macOS Ventura, comparing the butt-capped line breaks. Then inspect p5.js core rendering behavior around canvas lines; the work is done when the discrepancy is resolved or its expected browser-specific behavior is clearly established and covered by a focused check.