Fabian Iwand

HTML+CSS force graph

d3.zoom with drawImage()

d3.zoom into view

Session Buddy 4 to Tab Session Manager

Throttle

Search Query Tokenization

Compiling a regex from strings

Pure CSS Tree

The Fed - FOMC Projections Data

Terraform Registry Search

Lots of Dots

Exporting Your DuckDB Databases

flyctl Docs

HTML to Markdown

D3 Documentation Index

Throttling Function Calls

Web Page Metadata

Patched Imports

Deconstructing a Notebook

Discrete Sibson Interpolation

Edge Distance in Regular Polygons

Using A Vega-Lite Chart As Input Widget

Hello, interesting-polygon-archive!

findTriangle() for D3.Delaunay and Delaunator

Transparent Color Widget

Canvas Outlines: Stroke vs Fill

Eases On Edge

Converting Between Keyboard Layouts

D3 Force Along a Path

Inverted Luminosity

(Attempt at) Embedding a Video Into an SVG

Force Graph Trails

Title Transliteration

Optimal Tiling

Vega-Lite, Unminified

Notebook Version UUID

Improving Animations Through Motion Blur

Watermark

Querying the npm registry

Stitched Easings

Dynamic Notebook Links

Pixel Probing

Mapping Color Scales with SVG Filters

Google Maps Cost Calculator

Encoding Data In Images

Zdog Helpers

Using CodePens in Observable

Look What The Cat Dragged In

Adobe Swatch Exchange Exporter

Polygon Sine Wave

SVG Single Path Grid

Color Blending Is Broken

Intersection Arcs

Per-Layer Fadeout In 2D Canvas

Voronoi Borderlands

Embedding a canvas into an SVG

Embedding Fonts Into An SVG

Version Pinning for Notebooks

Splitting Lines

Easing In Multiple Steps

Tools & Techniques

Stuff with knobs to make it look more or less pretty.

Generative

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

https://media.giphy.com/media/C8uD3q9rZMzFwaV1yx/source.gif

https://cdn.britannica.com/28/18828-004-F34821B4/orbe-mathematici-ob-scripta-insignia-tribvere-obverse.jpg

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