In Chrome the canvas layer is drawn over the svg square. It's a known bug that has been here for ages https://bugs.chromium.org/p/chromium/issues/detail?id=148499

Yup, you can find a workaround here: https://talk.observablehq.com/t/what-is-the-best-way-to-overlay-an-svg-over-a-canvas/277/17

thank you! I had read that thread but apparently not close enough!

Note that the workaround goes only so far (for example, if the svg has a white background, the canvas will be hidden behind). (Since it's a deeply entrenched bug, we can suppose it's not going to be fixed anytime soon… too bad!)

No, I'm thankful that you've pointed it out again. This demo could be called misleading, because it suffers from the same bug, and due to the blur it's hardly noticable. > Note that the workaround goes only so far Yes, it's kind of a shitty example if it demonstrates a technique that won't work in the browser with the biggest marketshare.

I've added a caveat section and included the workaround. Interestingly the snapshot renders fine, the rect is on top. :)

yes we can go around the bug with this canvas.toDataUrl() trick; the performance is bad, but not dreadful: https://observablehq.com/d/a85859cd74d8b6cd

Yes, but at that point you can just cut out the middleman (foreignObject) and use an SVG image element. ;)

@fil I've made some changes, and now I'm no longer seeing the bug. Could you check again, and if you're still seeing the bug, could you tell me your browser version?

It's hard to tell which is which especially with the movement :) but I set the stroke as green 100px below and red above, and it seems to work correctly. How did you manage to solve it??

My best guess is some element namespace issues. Note that I'm now creating the complete SVG in one go. Also, the closing canvas tag is absolutely essential, otherwise following elements won't render at all.

Nope, I don't have the faintest idea. Trying to replicate in your own notebook, so far without success.

Figured it out: You need to call .getImageData() for the canvas context. It doesn't matter which region or size.

And apparently calling it once is enough.

WWOOWOWOWOWOWOWW TRUE https://observablehq.com/d/dd1bf36050eca74f

And I'd never have found it if I hadn't been annoyed by the old fade effect and needed an excuse to procrastinate :D

Please also reply in https://bugs.chromium.org/p/chromium/issues/detail?id=148499

I've updated the animation to better convey the various layers, and added a colorization option.

splendid! the bad news is it doesn't work in *any* browser on the iphone (chrome, safari, firefox)…

Then it's probably fair to assume that it doesn't work in Safari in general, as all iOS browser frontends on iOS are forced to use Webkit.

ah yes, it doesn't work on safari desktop either…

I'm afraid that's probably unfixable/workaround-able (around-workable?). I've added a note.

It seems that the getImageData hack no longer works for Chrome, at least for the animation (the snapshot is fine). On the bright side, a general fix is already being rolled out gradually. https://bugs.chromium.org/p/chromium/issues/detail?id=148499#c57