Make the canvas play nice with zooming and resizing

[JobLeonard]

Here is a two minute screencapture I uploaded to youtube showing various issues with zooming in and out on the desktop at the moment.

• 100% or less works fine as long as the user does not zoom while showing a plot
• more than 100% zoom also breaks when simply changing a setting, for some mysterious reason. The most likely reason is the way flexbox and canvas width interact.

There are also some issues with displaying plots on small phone screens or resized windows. Although this is not really something we need to worry about in practice, it highlights how both the settings and the plotting legend take up a lot of screen space, so that might be worth investigating:

(still, if the website would work well on tablets that would be a very nice feature)

This is a wontfix for now for two reasons. First, properly fixing it requires detecting both browser zoom and device pixel ratio, for which there is no consistent or even complete browser API at the moment[0]. In other words: it appears browsers won't even allow for a proper fix right now. Second, it does not look like the eventual fix will be of the kind that requires a deep replumbing of the whole set-up, so we can "safely" postpone it (I will probably regret saying this in the future) and focus on getting things working outside of these edge-cases for now.

So for the moment, the best way to deal with it is simply not using browser zoom :-1: .

[0] http://tombigel.github.io/detect-zoom/

[JobLeonard]

• more than 100% zoom also breaks when simply changing a setting, for some mysterious reason. The most likely reason is the way flexbox and canvas width interact.

So I just double-checked with Gioelle and this appears to be an issue on retina screens too, so I have to fix this. Dammit.

[JobLeonard]

OMG, I think I actually managed to get this to work! Through a dirty hack of course. We put a canvas in a div, then make it scale 100% width/height to fit the parent div regardless of pixel ratio, then look at the div's pixel size to rescale canvas pixel size... It even renders a not-completely-useless image on my iPhone now

[JobLeonard]

For posterity; this required a lot of hunting for an inexplicable 5 pixel margin in Firefox that caused the canvas to increase in size by 5 pixels every time the canvas was being resized. Turns out this is an ancient "feature", but it's fixed by manually setting the canvas' display mode to block.

It also still has issues with downsizing once a canvas is too large, but this is a non-realistic edge case that's can easily be worked around by the user (just re-open the plot; the data and view settings will be sitting in the cache anyway)