Ellipse with large StrokeWeight not displaying correctly on mobile

p5.js
1

please format code with </> button * homework policy * asking questions

Hi,

I’ve got the following very basic code:

function setup() {
  createCanvas(windowWidth, windowHeight);
}

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

It works great on a PC browser, but when I view the same on mobile (I’ve only tested this on an iPhone), the ellipse doesn’t look right. It seems that it is not ‘closing’ itself correctly. Here is a picture highlighting the issue:

IMG-4905
IMG-49051242×2208 64.8 KB

You can see on the outer left part of the ellipse, there is a little knob sticking out. When viewed on a PC browser, it closes smoothly.

Any idea what’s wrong and how to fix it?

Thanks for the help!

1 Like
2

Hello and welcome @ella_d,

My guess is that you’ve stumbled over a bug. I can confirm the same behavior on my iPhone running iOS 13.5. You could report this by opening an issue on GitHub.

A possible workaround is to draw to ellipses:

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255);
  noStroke();

  fill(0);
  ellipse(width / 2, height / 2, 280, 225);
  fill(255);
  ellipse(width / 2, height / 2, 180, 125);
}
1 Like
3

Thanks @Sven that’s helpful to know it’s happening on your device as well. I will raise an issue as you’ve advised.

Thanks also for the suggestion. It would work well except that I have a background made up of a grid of touching circles that I’d like to see through the hole in the ellipse. The ellipse moves around the screen while the background stays still. Is there an easy way to display the background in the inner ellipse?

Here is a snapshot of the background: image

4

Ah, I see. :slight_smile: Have you used createGraphics() before? It lets you draw on an off-screen graphics buffer. Think of it as an additional canvas that you can draw to and then put that canvas above your default one. Like layers in graphics software.

That, in combination with erase() could be a workaround.

let donut;

function setup() {
  createCanvas(windowWidth, windowHeight);

  donut = createGraphics(282, 227);
  donut.fill(0);
  donut.ellipse(donut.width / 2, donut.height / 2, 280, 225);
  donut.erase();
  donut.ellipse(donut.width / 2, donut.height / 2, 180, 125);
  donut.noErase();
}

function draw() {
  background('pink');

  image(donut, width / 2 - 140, height / 2 - 112.5);
}
1 Like
5

Awesome, thanks @Sven! I didn’t know about createGraphics() or erase() but I can see how that would work! I’ll try it and let you know if I have any further issues. Thanks for the good advice.

1 Like