P5.js: Ellipse with large StrokeWeight not displaying correctly on mobile devices

[elladahan]

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Dom
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [x] Other (specify if possible) --> Shapes

Details about the bug:

• p5.js version: web editor
• Web browser and version: Chrome for iPhone v83.0.4103.88, Safari on iPhone
• Operating System: iOS 13.4, iOS 13.5
• Steps to reproduce this:
  Create a canvas with an ellipse with a large stroke weight (for example >50). Present the artwork on a mobile device. You will notice that the left edge has a small overhanging rectangle. Please see the attached image with the problem highlighted. Note this does not happen on a PC web browser.
  The code to reproduce this is as follows:

function setup() {
createCanvas(windowWidth, windowHeight);
}
function draw() {
background(255);
noFill()
strokeWeight(50)
stroke(0)
ellipse(width/2, height/2, 180, 125)
}

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[micuat]

I copied it to the web editor
https://editor.p5js.org/micuat/sketches/NQ8ddPSR3
(please do so next time so we can save some time!)

[lmccart]

@elladahan I'm wondering if you still see this behavior if you make your ellipse width and height even numbers? it could possibly be due to pixel value rounding

[elladahan]

@lmccart thanks for the suggestion. I've made the width and height even numbers, as well as the position of the ellipse and the canvas size. I still see the same behaviour unfortunately!

[lmccart]

ok that's helpful info thanks! we'll keep looking into it

[micuat]

I found it. Actually closePath is triggering the artifact. In the following sketch, I copied the content of ellipse and added a condition (line 53) so that only calls ctx.closePath if mouse is pressed (or tapped on the screen)
source: https://editor.p5js.org/micuat/sketches/ICfXJN_HI
presentation link for mobile: https://editor.p5js.org/micuat/present/ICfXJN_HI

@lmccart Is there any side effect of removing closePath?

[lmccart]

@micuat youre right, that seems redundant! would you like to submit a PR to remove it?

[lmccart]

@micuat actually I'm in here right now so I'm going to go ahead and make the change, hope that's ok.

[elladahan]

Thanks so much for looking into this and fixing it so quickly! @lmccart when can I expect this fix to be released in the web editor?

[lmccart]

we don't have a target date, but I'm working on a new release within the next two weeks. it usually takes a little while longer for the editor to update after that.