Working on the game, and every time I mouse-click to move (finally adding that, it's been all keyboard up to now), the screen was flickering! This had never happened before. Literally 3 hours of debugging, adding voodoo CSS incantations like:
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: rgba(0,0,0,0);
which did nothing…
Finally made a new test project with just the canvas code and a mouse handler. Still not flickering. Then I add random lines on the screen to see some content, need to find the canvas size to make those lines, and that flushes out the offending line:
1: canvasSize() {
2: const canvas = $("canvas");
3: const size = [canvas.offsetWidth, canvas.offsetHeight];
4: canvas.width = size[0]; canvas.height = size[1];
5: return size;
6: }
See it? Line 4 is reassigning the width & height of the element, based on the display width/height. Which has to be done during setup and on window resize, but blanks out the entire canvas.
SIGH. Split that out into setup, and the flicker goes away.
It's so impossible to know what's my fault and what's HTML/CSS/JS being weird.
At least I'm only fighting a single rendering engine here. I miss doing this stuff in UIKit/SpriteKit or OpenGL ("I made a triangle!"), but the former's sinking in the Swamp of Swift, and the latter's RIP deprecated, and I'm hardly going to chain myself further to Apple with Metal.