自動で再描画させる
paintイベントのたびに描画すると、HTMLの変化がCanvasへ反映されます。時計やテキスト入力、ホバーの変化がそのまま反映されることを確認してください。
操作デモ
<div>
</div>
<canvas layoutsubtree>
</canvas>
確認できること
Canvasの中身が動く
時計、テキスト入力、ホバーなどHTML側の変化に追従して、Canvasも自動的に描き直されます。
この段階の制約
決まった位置にしか描けない
ここでは左上の決まった位置に描画しています。位置や変形を変える方法は次のデモで扱います。
デモの中心となるコード
コードを読み込んでいます…