🧩 レンダラーのカプセル化

HtmlRenderer
class HtmlRenderer { async draw(ctx, x, y) { const svg = await this.generateSVG(); const image = await this.svgToImage(svg); ctx.drawImage(image, x, y); } }
VideoRenderer
class VideoRenderer { draw(ctx, x, y) { if (this.video.readyState >= 2) { ctx.drawImage( this.video, x, y ); } } }
✅ 独立したレンダラー
それぞれが独自の描画ロジックを持つ