# Canvas doesn't show on mobile

**URL:** https://discourse.processing.org/t/canvas-doesnt-show-on-mobile/29250
**Category:** Beginners
**Created:** [April 9, 2021, 5:54pm UTC](https://discourse.processing.org/t/canvas-doesnt-show-on-mobile/29250 "2021-04-09T17:54:46Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![loopy](https://avatars.discourse-cdn.com/v4/letter/l/278dde/32.png) [@loopy](https://discourse.processing.org/u/loopy)
#### Post date: [April 9, 2021, 5:54pm UTC](https://discourse.processing.org/t/canvas-doesnt-show-on-mobile/29250/1 "2021-04-09T17:54:47Z")

</div>

Hi everyone! I recently published a background creation app and I’m confused about its canvas behavior, namely that the canvas _sometimes_ doesn’t display on mobile. I know it doesn’t show on my old iPhone on Safari and Firefox but I heard that it does on a OnePlus 6T. I know the issue isn’t (solely) the usual culprit, viewport size, through testing on desktop.

I’m not sure how to emulate this mobile behavior on my computer otherwise I’d be doing that to debug. On page load the user should see a patterned background with a colorful gradient fill applied to each shape.

live: [Meander](https://strangestloop.io/meander/)  
github: [GitHub - loopstrangest/meander: Create and customize tiling images](https://github.com/loopstrangest/meander)

The relevant elements are:

```auto
<div class="styledCanvas">
<div class="grainOverlay" style="width: 3000px; height: 3000px; left: 0px; top: 0px; z-index: 1; position: inherit;"></div>
<div class="tileCanvas" style="position: inherit; filter: blur(0px);">
<canvas id="defaultCanvas0" class="p5Canvas" width="3000" height="3000" style="width: 3000px; height: 3000px;"></canvas>
</div>
</div>

```

`styledCanvas` contains `grainOverlay` which provides the grain effect, and `grainOverlay` is z-indexed above its sibling `tileCanvas` which is the parent of the canvas element in question.

My current lines of inquiry are:

- `grainOverlay` functions differently on mobile somehow? Maybe it’s covering up the canvas which is actually being displayed.
- I use a resource-intensive process in my draw function to draw the gradient for each shape: `p5.drawingContext.createLinearGradient()`, this could be problematic on mobile.

To be clear I’m not asking anyone to debug my app for me. I’m more curious about possible explanations that are currently unknown unknowns to me that I can explore. How could this happen? And how can I recreate the wonky mobile behavior on my computer? Thanks for reading.

---

<div class="post-metadata">

### Author: ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)
#### Post date: [April 10, 2021, 2:03pm UTC](https://discourse.processing.org/t/canvas-doesnt-show-on-mobile/29250/2 "2021-04-10T14:03:29Z")

</div>

I don’t have mobile dev environment so I cannot look into it but doesn’t work on my iPhone SE (the old one) - only shows the grain layer. What happens if you test with a smaller size of `grainOverlay` so you can test if there is `tileCanvas` behind?

It’s not a solution but you could also use the overlay inside p5.js not as separate `div`/`canvas` - for example generate the grain effect on `p5.Graphics` and overlay at the end of the draw, or load the existing grain canvas as `p5.Graphics` - which, if I remember correctly, is possible.

btw nice project!!