Chrome for Developers: HTML-in-canvas: Where interactive content and high performance graphics meet

Learn how the new HTML-in-canvas API bridges the gap between expressive, accessible DOM elements and high-performance graphics. Explore how to render live, interactive DOM content directly into canvas pixels without sacrificing Web platform features like text selection and find-in-page, as well as accessibility via screen readers.



Chapters:

00:00 - Intro to HTML-in-canvas

00:40 - DOM vs. Canvas

03:11 - Build with HTML-in-canvas

04:02 - Step 1: Prepare your canvas

05:13 - Step 2: Drawing HTML elements in the canvas

07:03 - Understanding the Paint Event lifecycle

09:58 - Step 3: Synchronizing interaction geometry

11:41 - Tools and frameworks

12:38 - Summary and next steps



Resources:

HTML-in-Canvas developer documentation → https://goo.gle/hic-docs

HTML-in-Canvas community demos → https://goo.gle/awesome-hic

HTML-in-Canvas developer newsletter →https://goo.gle/hic-newsletter

File a bug → https://goo.gle/hic-issue

Github repo → https://goo.gle/4zLUQvI



Modern Web Guidance → https://goo.gle/modern-web-guidance





Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs



#ChromeForDevelopers #Chrome #WebDevelopment #HTMLinCanvas



Speakers: Natalia Markoborodova

Products Mentioned: Chrome