Show HN: Scrawl-canvas – build responsive, accessible HTML5 canvases
This fails my very first test of anything canvasy: it’s not scaling by devicePixelRatio, so it looks bad on a high-DPI display, especially if text is involved. I usually find this to be a bad sign.<p>This puzzled me, because it mostly looks very good (even if it rather encourages CPU-guzzling). Have you just never had access to a high-DPI environment and thus never thought about it? Anyway, this one should be very quick to fix.<p>Accessibility: yeah, you can tab between the links, which is good, but when you’re just hovering you’re not hovering over a real link, so you can’t see the link target, the cursor is wrong (though one that could be fixed), and modifiers don’t work. Right-click triggers the “links” too, which it shouldn’t. Things like this <i>must</i> be handled by drawing real DOM elements persistently on top of the canvas, and letting the user <i>genuinely</i> interact with them. No other approach is capable of achieving the expected and desired result. Not `location.href = …`, not `open(…)`, not `link.click()`. Nothing.<p>One straightforward (but inferior) approach to make this work could be to put an &lt;a tabindex=-1&gt; above the entire canvas (or even wrapping the canvas!) and set its href when hovering a “link”, and remove it again when not.<p>I haven’t delved into any more of the accessibility stuff, but it looks much better than most, and just needs to work on any real DOM counterparts to canvas pieces actually being in the right place, so that interactions, text selection, &amp;c. can work properly.