However, my initial (probably misguided) port to Observable went fine, right up until I tried to render things. If you uncomment the vsync command at the bottom, you’ll see it hoses the browser .
Any help would be appreciated. I’m sorry it’s so much code: I haven’t tried to reduce it to a minimal reproduction of the problem yet. I thought it would be worth asking first.
vsync() calls resizeCanvas(), which uses canvas.clientWidth and canvas.clientHeight. But because your canvas element hasn’t been added to the DOM yet, both are 0.
It might be sufficient to yield the canvas at the top of your cell, before any of the remaining code:
{
const canvas = DOM.canvas(768, 576);
yield canvas;
let sv = new ScreenView(canvas);
// ...
A good start for issues like this is to place a debugger; statement right before the line that you want to inspect. Once the breakpoint is active, you may have to click the top-level item in the call stack again to focus on the current cell.