katspaugh
multicanvas: use intersection observer to reduce canvas drawing
Update MultiCanvas to use the Intersection Observer API (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
This allows us to detect when one or more canvases are visible, and only render those canvases when they're visible. When you scroll in a song (and view their canvases), the intersection observer detects this and will render those canvases only. Once a canvas has been rendered it will not be rendered again.
So for example, with a max canvas width of 10,000 px, and heavy zooming on a large track, it could easily create 40 canvases (of 10k px) and render all of those when you issue the zoom command. This is unnecessary and only rendering the canvases visible to the user (the viewport) is enough.
I built it into the MultiCanvas renderer but this functionality could also/should be moved to a subclass of MultiCanvas.
It's enabled by default, unless the browser does not support the API.
Browser support: https://caniuse.com/#feat=intersectionobserver
Coverage increased (+0.2%) to 76.335% when pulling 1257ea127a816a11da2fe89fc9c5422083ab598d on intersection-observer into cc169cefb6eb2773ea47c7ef63bdfb603fe7b563 on master.
@thijstriemstra This change has brought a degraded performance. Using an mp3 track, ~4 minutes, while zoomed I have noticed additional stutter every few seconds. Current master branch does not have this stutter.
Additionally, while zooming in, there seems to be additional delay. Master branch also does not have this issue.
The idea to lazy-render canvases in the viewport is really good, it saves CPU and battery resources and probably results in a more responsive app (if implemented right). I'll close this PR for inactivity, but I suggest we return to this idea in the next version.
