Mastering Modern Web Experiments: HTML in Canvas, Hex Maps, E-ink Tweaks, and CSS Image Sorcery

Introduction

In the fast-paced world of web development, staying ahead means exploring bleeding-edge techniques. This guide transforms insights from What's !important #10 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.

What You Need

• A modern web browser: Chrome 146+ (for HTML-in-Canvas flag; other features work in most browsers)
• Code editor (VS Code, Sublime, or similar)
• Basic knowledge of HTML, CSS, and JavaScript
• For hex map: familiarity with SVG and data visualization
• Optional: An e-ink device (Kindle, Kobo, Boox) or an e-ink emulator
• Patience for experimentation – some APIs are experimental

Step-by-Step Guide

Step 1: Render HTML Inside a Canvas with the HTML-in-Canvas API

This new API allows you to embed semantic HTML into a <canvas> element, applying visual effects. To try it:

1. Enable the flag: Open Chrome and navigate to chrome://flags/#canvas-draw-element. Enable the “Canvas Draw Element” feature and relaunch.
2. Create a canvas: In your HTML, add a <canvas id="myCanvas"></canvas> element.
3. Draw HTML: Use JavaScript to get the canvas context and call context.drawElement(htmlElement). For example:

   const canvas = document.getElementById('myCanvas');
   const ctx = canvas.getContext('2d');
   const div = document.createElement('div');
   div.textContent = 'Hello, Canvas!';
   ctx.drawElement(div);
   

4. Apply effects: Since the HTML is rendered to a canvas, you can apply filters, transformations, or blend modes via the canvas API.
5. Explore demos: Check Amit Sheen’s HiC Showroom for inspiration (requires the flag).

Step 2: Build a Hexagonal World Map Analytics Feature

Inspired by Ben Schwarz’s retrospective, you can create your own hex-grid map using SVG and CSS. Here’s how:

1. Design a hex grid: Use a library like hex-grid or generate hex coordinates manually. Each hexagon is an SVG <polygon>.
2. Project geographic data: Convert country centroids or region points to hex grid indices. Tools like D3.js can help with projections.
3. Color-code by metric: For analytics, assign a color or intensity to each hexagon based on data (e.g., page views, sales). Use CSS classes or inline styles.
4. Add interactivity: Implement hover effects (e.g., tooltip with data) using JavaScript event listeners on each polygon.
5. Optimize performance: Use SVG sprites or a single SVG element to reduce DOM size. Consider using requestAnimationFrame for smooth transitions.

Step 3: Optimize a Web App for E-ink Devices

E-ink displays are slow to refresh and have limited color. To create an e-ink-friendly experience like Rekindle:

1. Use monochrome CSS: Apply color: black; background: white; and avoid gradients. Use @media (monochrome) to detect monochrome screens.
2. Disable animations: Set * { animation: none !important; transition: none !important; } within a media query for e-ink devices.
3. Limit pointer precision: E-ink devices often have coarse touch. Use larger touch targets (at least 48px) and avoid hover-only interactions. Query @media (pointer: coarse).
4. Reduce update frequency: Use @media (update: slow) to minimize repaints. Consider debouncing input events.
5. Test with Rekindle: Visit Rekindle's website to see how a full e-ink OS works. You can experiment by building your own simplified version with these techniques.

Step 4: Swap Image Sources Using CSS content

Jon’s discovery shows you can replace an <img> src with CSS alone. Here's how:

1. Start with an image: <img src="original.png" alt="Original description">
2. Apply CSS rule: img { content: url(new-image.png) / "New alt text"; } The / separates the image from the alternative text.
3. Use image-set() for responsive images: img { content: image-set(url(low-res.jpg) 1x, url(high-res.jpg) 2x); }
4. Test across browsers: This works in all current browsers (Chrome, Firefox, Safari, Edge). It's been Baseline for 11 years.
5. Apply conditionally: Combine with media queries: @media (min-width: 600px) { img { content: url(desktop.jpg); } }

Tips and Considerations

• Experimental features: HTML-in-Canvas is behind a flag; don't rely on it in production yet. Check browser support regularly.
• Accessibility: When swapping img srcs via CSS, ensure the alt text is updated as shown. Screen readers use the alt attribute from HTML, not CSS – but the / syntax in content is intended for future support.
• Performance: Hex maps with many polygons can be heavy; consider using WebGL or a canvas fallback for large datasets.
• E-ink testing: If you don’t have a physical device, use Chrome DevTools’ device emulation with a custom e-ink profile (monochrome, slow update).
• Stay updated: Media Queries Level 5 for e-ink is still evolving. Watch for new specs and browser implementations.
• Community inspiration: Explore the demos from Amit Sheen and the Rekindle project for deeper insights. Many techniques are community-driven and open-source.

Now you have a solid foundation to experiment with these modern web capabilities. Happy coding!