🔗 統合表示クラス設計
class UnifiedDisplay {
constructor(width, height) {
this.canvas = new OffscreenCanvas(width, height);
this.ctx = this.canvas.getContext('2d');
this.htmlRenderer = null;
this.videoRenderer = null;
}
render() {
// HTML部分を描画
if (this.htmlRenderer) {
this.htmlRenderer.draw(this.ctx, 0, 0);
}
// 動画部分を描画
if (this.videoRenderer) {
this.videoRenderer.draw(this.ctx, 0, 200);
}
}
}
✅ 1つのCanvasに統合
HTMLと動画を同じ領域に配置可能
✅ 位置指定で配置
柔軟なレイアウトが実現