Canvas element not rendering on iOS devices

I have a canvas element on my site that renders perfectly in the desktop browser as well as on Android devices, but will not render on iOS devices (iPad, iPhone) - neither Safari nor Chrome on ios. I'm using Materialize as my CSS framework.

I solved this problem by enabling Web Inspector on my Ipad (Settings>>Safari>>Advanced) and then connecting to a friends Mac PC. Using Safari on the Mac, I was able to enable Web Inspector and thus view Apple's Developer Tools (Settings>>Advanced>>Show Develop Menu In Menu Bar).

I found that the width for my <canvas> element was returning to zero. This meant that window.innerWidth was either returning 0 or null and thus resizing my canvas to zero width rather than to the width of the device.

This led me to try using screen.width instead. This solved the problem. Since I know that window.innerWidth works on all other devices, I added a check on navigator.platform to use screen.width only on iOS devices.