Canvas gets stretched on mobile

[hermionewy]

Hi regl gurus! Thank you so much for this awesome library! I'm amazed by your work.

As the title implied, when mobile browser screen change height, which happens a lot when users scroll back and force and the bottom taskbar shows/hides, the canvas would get stretched.

Here's how the canvas size is defined:

function resize () {
    var w = window.innerWidth
    var h = window.innerHeight
    if (element !== document.body) {
      var bounds = element.getBoundingClientRect()
      w = bounds.right - bounds.left
      h = bounds.bottom - bounds.top
    }
    canvas.width = pixelRatio * w
    canvas.height = pixelRatio * h
    extend(canvas.style, {
      width: w + 'px',
      height: h + 'px'
    })
  }

On mobile, window.innerHeight would be higher than the available screen height and the canvas would look stretched. If the element we passed in use height:100vh, the canvas would also end up stretched.

I'm proposing a small fix: use document.documentElement.clientHeight instead of window.innerWidth. It wouldn't change the view for desktop but would make the mobile view better. For element passed in to createCanvas, use javascript to force its height to document.documentElement.clientHeight.

I would love to learn about other solutions too!

Thank you!

Sincere,

[rreusser]

Interesting! Welcome! That's a really helpful suggestion! I always find mobile resizing behavior exceptionally confusing and usually take a big sigh and just move on, so I'm curious to see or experiment with the effect this has.

One question is when you say that the canvas would look stretched, is it the case that the pixels would be non-square, or if the element is bigger than the viewable portion of the window, would part of the canvas instead be cut off?

At the very minimum to move a fix forward, it's probably necessary to cook up a test case that illustrates the difference (I'm just some random maintainer/citizen, but I helped merge a fix recently which accidentally led to an infinite loop and caused canvas elements to grow 1px at a time, without bound, so I want to be careful here). I don't think it should be too bad, but I don't have time to dig in right at the moment and make sure I understand it. I might be able to give it a shot this weekend. Either way, thanks for the helpful suggestion and I'm glad to help make the change!