【2026年新API】HTML in Canvas APIとは？実際に触って分かったこと

Posted at 2026-07-25

HTML in Canvas APIとは

2026年にトライアルが始まったHTML in Canvas API
htmlの要素である<canvas>に対して、HTML要素を置けるようになったアップデートです

本記事では使い方とメリット、サンプルを紹介したい

以下のリンクに入り, HTML-in-Canvasを有効化する必要がある。
chrome://flags/#canvas-draw-element

通常のHTMLと同じように、Canvasの子要素としてHTMLを配置できます。

<canvas id="canvas" layoutsubtree>
  <div class="card">カード</div>
</canvas>

ctx.drawElementImage(card, 100, 100);

Canvasで角丸や影を描画する必要はありません。

.card{
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  background:white;
}

DOMイベントをそのまま利用できます。

card.addEventListener("click", () => {
  console.log("クリック");
});

card.addEventListener("pointerdown", () => {
  console.log("ドラッグ開始");
});

Canvas上の任意の位置へHTMLを描画できます。

ctx.drawElementImage(card, 250, 120);

Canvasのクリッピング領域に従ってHTMLも描画されます。

ctx.save();
ctx.rect(50, 50, 200, 200);
ctx.clip();

ctx.drawElementImage(card, 180, 180);

ctx.restore();

図形とHTMLを同じCanvas上で描画できます。

ctx.fillStyle = "#4CAF50";
ctx.fillRect(0, 0, 100, 100);

ctx.drawElementImage(card, 120, 20);