Canvas doesn't show on mobile

p5.js Beginners
1

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
github: GitHub - loopstrangest/meander: Create and customize tiling images

The relevant elements are:

<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.

2

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!!

1 Like