ワンショットで転写する

drawElementImage()をボタン操作で1回呼び、ブラウザーが記録した最新のHTMLの描画状態をCanvasへ転写します。ルビも折り返しも入力欄も、ブラウザーがレイアウトした姿のまま画像になります。

<div>

--:--:--

吾輩（わがはい）は猫である。名前はまだ無い。どこで生れたかとんと見当（けんとう）がつかぬ。

</div>

<canvas content="drawable">
</canvas>

確認できること

HTMLのレイアウトをそのまま描ける

ルビや文章の折り返し、入力欄の見た目まで、Canvas側で組み直す必要はありません。

この段階の制約

描いた内容は更新されない

時計や入力内容が変わっても、もう一度「Canvasに描画」を押すまで見た目は更新されません。入力やクリックはできますが、その結果を表示するには再描画が必要です。

デモの中心となるコード
コードを読み込んでいます…