--:--:--
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
ワンショットで転写する
drawElementImage()を1回呼び、その瞬間のHTMLをCanvasへ描画します。ルビも折り返しも入力欄も、ブラウザーがレイアウトした姿のまま画像になります。
操作デモ
<div>
</div>
<canvas layoutsubtree>
</canvas>
確認できること
HTMLのレイアウトをそのまま描ける
ルビや文章の折り返し、入力欄の見た目まで、Canvas側で組み直す必要はありません。
この段階の制約
描いた内容は更新されない
時計や入力内容が変わってもCanvasは静止したままです。描画後の内容はピクセルにすぎません。
デモの中心となるコード
コードを読み込んでいます…