Mastering Modern Web Experiments: HTML in Canvas, Hex Maps, E-ink Tweaks, and CSS Image Sorcery
By ✦ min read
<h2>Introduction</h2>
<p>In the fast-paced world of web development, staying ahead means exploring bleeding-edge techniques. This guide transforms insights from <em>What's !important #10</em> into a practical how-to. You'll learn to render real HTML inside a canvas, build hexagonal data visualizations, optimize for e-ink displays, and even swap image sources with pure CSS. Each technique is explained step-by-step, with prerequisites and tips to help you get started. Whether you're a seasoned developer or a curious learner, these experiments will expand your toolkit.</p><figure style="margin:20px 0"><img src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/wh10.jpg" alt="Mastering Modern Web Experiments: HTML in Canvas, Hex Maps, E-ink Tweaks, and CSS Image Sorcery" style="width:100%;height:auto;border-radius:8px" loading="lazy"><figcaption style="font-size:12px;color:#666;margin-top:5px">Source: css-tricks.com</figcaption></figure>
<h2>What You Need</h2>
<ul>
<li>A modern web browser: Chrome 146+ (for HTML-in-Canvas flag; other features work in most browsers)</li>
<li>Code editor (VS Code, Sublime, or similar)</li>
<li>Basic knowledge of HTML, CSS, and JavaScript</li>
<li>For hex map: familiarity with SVG and data visualization</li>
<li>Optional: An e-ink device (Kindle, Kobo, Boox) or an e-ink emulator</li>
<li>Patience for experimentation – some APIs are experimental</li>
</ul>
<h2 id="steps">Step-by-Step Guide</h2>
<h3 id="step1">Step 1: Render HTML Inside a Canvas with the HTML-in-Canvas API</h3>
<p>This new API allows you to embed semantic HTML into a <code><canvas></code> element, applying visual effects. To try it:</p>
<ol>
<li><strong>Enable the flag:</strong> Open Chrome and navigate to <code>chrome://flags/#canvas-draw-element</code>. Enable the “Canvas Draw Element” feature and relaunch.</li>
<li><strong>Create a canvas:</strong> In your HTML, add a <code><canvas id="myCanvas"></canvas></code> element.</li>
<li><strong>Draw HTML:</strong> Use JavaScript to get the canvas context and call <code>context.drawElement(htmlElement)</code>. For example:
<pre><code>const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const div = document.createElement('div');
div.textContent = 'Hello, Canvas!';
ctx.drawElement(div);
</code></pre>
</li>
<li><strong>Apply effects:</strong> Since the HTML is rendered to a canvas, you can apply filters, transformations, or blend modes via the canvas API.</li>
<li><strong>Explore demos:</strong> Check Amit Sheen’s <a href="#">HiC Showroom</a> for inspiration (requires the flag).</li>
</ol>
<h3 id="step2">Step 2: Build a Hexagonal World Map Analytics Feature</h3>
<p>Inspired by Ben Schwarz’s retrospective, you can create your own hex-grid map using SVG and CSS. Here’s how:</p>
<ol>
<li><strong>Design a hex grid:</strong> Use a library like <a href="https://github.com/RedwolfPrograms/hex-grid">hex-grid</a> or generate hex coordinates manually. Each hexagon is an SVG <code><polygon></code>.</li>
<li><strong>Project geographic data:</strong> Convert country centroids or region points to hex grid indices. Tools like <a href="https://d3js.org/">D3.js</a> can help with projections.</li>
<li><strong>Color-code by metric:</strong> For analytics, assign a color or intensity to each hexagon based on data (e.g., page views, sales). Use CSS classes or inline styles.</li>
<li><strong>Add interactivity:</strong> Implement hover effects (e.g., tooltip with data) using JavaScript event listeners on each polygon.</li>
<li><strong>Optimize performance:</strong> Use SVG sprites or a single SVG element to reduce DOM size. Consider using <code>requestAnimationFrame</code> for smooth transitions.</li>
</ol>
<h3 id="step3">Step 3: Optimize a Web App for E-ink Devices</h3>
<p>E-ink displays are slow to refresh and have limited color. To create an e-ink-friendly experience like Rekindle:</p>
<ol>
<li><strong>Use monochrome CSS:</strong> Apply <code>color: black; background: white;</code> and avoid gradients. Use <code>@media (monochrome)</code> to detect monochrome screens.</li>
<li><strong>Disable animations:</strong> Set <code>* { animation: none !important; transition: none !important; }</code> within a media query for e-ink devices.</li>
<li><strong>Limit pointer precision:</strong> E-ink devices often have coarse touch. Use larger touch targets (at least 48px) and avoid hover-only interactions. Query <code>@media (pointer: coarse)</code>.</li>
<li><strong>Reduce update frequency:</strong> Use <code>@media (update: slow)</code> to minimize repaints. Consider debouncing input events.</li>
<li><strong>Test with Rekindle:</strong> Visit <a href="#">Rekindle's website</a> to see how a full e-ink OS works. You can experiment by building your own simplified version with these techniques.</li>
</ol>
<h3 id="step4">Step 4: Swap Image Sources Using CSS <code>content</code></h3>
<p>Jon’s discovery shows you can replace an <code><img></code> src with CSS alone. Here's how:</p><figure style="margin:20px 0"><img src="https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/04/1-1.png?resize=1760%2C990&#038;ssl=1" alt="Mastering Modern Web Experiments: HTML in Canvas, Hex Maps, E-ink Tweaks, and CSS Image Sorcery" style="width:100%;height:auto;border-radius:8px" loading="lazy"><figcaption style="font-size:12px;color:#666;margin-top:5px">Source: css-tricks.com</figcaption></figure>
<ol>
<li><strong>Start with an image:</strong> <code><img src="original.png" alt="Original description"></code></li>
<li><strong>Apply CSS rule:</strong> <code>img { content: url(new-image.png) / "New alt text"; }</code> The <code>/</code> separates the image from the alternative text.</li>
<li><strong>Use <code>image-set()</code> for responsive images:</strong> <code>img { content: image-set(url(low-res.jpg) 1x, url(high-res.jpg) 2x); }</code></li>
<li><strong>Test across browsers:</strong> This works in all current browsers (Chrome, Firefox, Safari, Edge). It's been Baseline for 11 years.</li>
<li><strong>Apply conditionally:</strong> Combine with media queries: <code>@media (min-width: 600px) { img { content: url(desktop.jpg); } }</code></li>
</ol>
<h2 id="tips">Tips and Considerations</h2>
<ul>
<li><strong>Experimental features:</strong> HTML-in-Canvas is behind a flag; don't rely on it in production yet. Check browser support regularly.</li>
<li><strong>Accessibility:</strong> When swapping <code>img</code> srcs via CSS, ensure the alt text is updated as shown. Screen readers use the alt attribute from HTML, not CSS – but the <code>/</code> syntax in <code>content</code> is intended for future support.</li>
<li><strong>Performance:</strong> Hex maps with many polygons can be heavy; consider using WebGL or a canvas fallback for large datasets.</li>
<li><strong>E-ink testing:</strong> If you don’t have a physical device, use Chrome DevTools’ device emulation with a custom e-ink profile (monochrome, slow update).</li>
<li><strong>Stay updated:</strong> Media Queries Level 5 for e-ink is still evolving. Watch for new specs and browser implementations.</li>
<li><strong>Community inspiration:</strong> Explore the demos from Amit Sheen and the Rekindle project for deeper insights. Many techniques are community-driven and open-source.</li>
</ul>
<p>Now you have a solid foundation to experiment with these modern web capabilities. Happy coding!</p>
Tags: