# Ellipse with large StrokeWeight not displaying correctly on mobile

**URL:** <https://discourse.processing.org/t/ellipse-with-large-strokeweight-not-displaying-correctly-on-mobile/21450>\
**Category:** p5.js\
**Created:** [May 31, 2020, 10:21am UTC](https://discourse.processing.org/t/ellipse-with-large-strokeweight-not-displaying-correctly-on-mobile/21450 "2020-05-31T10:21:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ella\_d](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@ella\_d](https://discourse.processing.org/u/ella_d)\
**Post date:** [May 31, 2020, 10:21am UTC](https://discourse.processing.org/t/ellipse-with-large-strokeweight-not-displaying-correctly-on-mobile/21450/1 "2020-05-31T10:21:58Z")

</div>

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

Hi,

I’ve got the following very basic code:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4602e9c8e87d168d38e1afa088fbb23970242997.jpeg)

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!

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [May 31, 2020, 12:22pm UTC](https://discourse.processing.org/t/ellipse-with-large-strokeweight-not-displaying-correctly-on-mobile/21450/2 "2020-05-31T12:22:00Z")

</div>

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](https://github.com/processing/p5.js/issues).

A possible workaround is to draw to ellipses:

```javascript
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);
}

```

---

<div class="post-metadata">

**Author:** ![ella\_d](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@ella\_d](https://discourse.processing.org/u/ella_d)\
**Post date:** [June 1, 2020, 9:05pm UTC](https://discourse.processing.org/t/ellipse-with-large-strokeweight-not-displaying-correctly-on-mobile/21450/3 "2020-06-01T21:05:04Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/e7db004e10526dbc8e37ca16f11849e8ee61408b.png)

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [June 1, 2020, 9:49pm UTC](https://discourse.processing.org/t/ellipse-with-large-strokeweight-not-displaying-correctly-on-mobile/21450/4 "2020-06-01T21:49:33Z")

</div>

Ah, I see. 🙂 Have you used [`createGraphics()`](https://p5js.org/reference/#/p5/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()`](https://p5js.org/reference/#/p5/erase) could be a workaround.

```javascript
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);
}

```

---

<div class="post-metadata">

**Author:** ![ella\_d](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@ella\_d](https://discourse.processing.org/u/ella_d)\
**Post date:** [June 2, 2020, 4:16pm UTC](https://discourse.processing.org/t/ellipse-with-large-strokeweight-not-displaying-correctly-on-mobile/21450/5 "2020-06-02T16:16:27Z")

</div>

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.