Canvas resolution larger than necessary on phone in portrait mode

[hrgdavor]

Expected Behavior

correct canvas resolution

Actual Behavior

canvas resolution is too large on Android phone in portrait mode.

Steps to Reproduce the Problem

1. open app in Android phone
2. turn on grid
3. rotation is sluggish
4. put phone in landscape, rotation is much faster

The slowdown is due canvas being posibly 3x size needed (in portrait mode)

Specifications

I have an idea for a fix:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

by changing demo.js

var meta = document.createElement('meta');
meta.setAttribute('name','viewport');
meta.setAttribute('content','width=device-width, initial-scale=1, user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(meta);

but controls on the top get crammed and overlap, so app layout needs to be changed for mobile too. (maybe moving all of the controls into a single menu)

I will make a pull request after I finish rotate/pan/zoom improvements

• Version: V2
• Platform: Android
• Environment: browser

[z3dev]

I think the grid size can be calculated whenever a new set of geometry is being rendered. There’s a really old issue about this as well.

[hrgdavor]

The grid size would be a separate issue. I used grid here just as a convenient tool to display performance hit.

The issue reported is that canvas area is much larger than needed in portrait mode.

• 4x when pixelRatio=2
• 9x when pixelRatio=3 (that is a huge difference for rendering).