Getting Started

Set up the standard rendering environment and bind your first layout subtree in minutes.

⚠️ Crucial Requirement: Enable Chromium Flag

Since HTML-in-Canvas is a cutting-edge draft specification under active origin trial, it must be manually enabled in your local browser instance to run native canvas draw methods:

Download and install Chrome Canary or Chrome Dev Channel (Version 149+ recommended).
Open a new browser tab and navigate to: chrome://flags/#canvas-draw-element.
Find the flag titled "HTML-in-Canvas API" and change its status from Default to Enabled.
Relaunch Chrome Canary. Now native API hooks will run natively!

1. Install standard package

npm install html-in-canvas-core

2. Define canvas semantic subtree in markup

<canvas id="webglCanvas" width="800" height="450" layoutsubtree>
  <div id="interactiveNode" style="padding: 20px;">
    <h3>GPU Node Heading</h3>
    <button id="myCanvasButton">Click Me</button>
  </div>
</canvas>

Proceed to API Reference

Next, explore the comprehensive methods to draw element matrices inside standard 2D contexts.

Explore API Reference →