FPS: ...

1. 描画対象のHTML要素

Hello, WTFRender!

下のボタンを押すと、このHTML要素がピクセル単位のdivで再描画されます。

処理の概要

ステップ1:上の#render-target要素をhtml2canvasで#source-canvasに映します
ステップ2:#source-canvasと同じサイズの1px四方のdiv要素を#pixel-gridに生成します
ステップ3:#source-canvasの各ピクセルの色を、対応するdiv要素の背景色に設定します
ステップ4:結果として#render-targetの見た目が#pixel-grid上で再現されます

開発者ツールで#pixel-gridの中身を見ると、膨大な数のdivが生成されているのが分かります。まさに終わっている実装です!

2. レンダリング結果