Canvas 描画順序テスト

クロスオリジン画像(picsum.photos)とローカル生成画像を交互に描画し、
drawImage のオーバーライドによる描画順序の崩れを確認するテストページです。
正しい順序なら、後から描画されたレイヤーが上に表示されます。

Test 1: 交互描画(3層)

Local(赤) → Cross-origin(写真) → Local(半透明青)
青が最前面に見えるべき

✅ 期待: 写真の上に半透明の青が重なる

Test 2: 5層サンドイッチ

赤 → Cross① → 緑 → Cross② → 半透明黄
各レイヤーが順に重なるべき

✅ 期待: 黄色が最前面、その下に写真②→緑→写真①→赤

Test 3: 同一画像を位置ずらしで3回

同じCross-origin画像を(0,0), (40,40), (80,80)に描画
後の方が上に重なるべき

✅ 期待: 3枚が右下にずれて重なる(影のように)

Test 4: transform + クロスオリジン

回転した赤矩形 → Cross-origin → スケールした青矩形
transform状態が正しく保存されるか

✅ 期待: 回転赤の上に写真、その上にスケール青

レイヤー凡例

Local: 赤の矩形
Local: 緑の矩形
Local: 半透明青の矩形
Local: 半透明黄の矩形
Cross-origin: picsum.photos の写真