Advanced Canvas Trading Charts

I’m building a personal project around a high-performance trading interface and I need an architecture-level HTML5 Canvas solution that can render market data cleanly and quickly. The core of the job is a reusable Canvas engine capable of displaying candlestick, line and bar charts, each with smooth zoom-in/zoom-out, animated transitions and subtle candle effects (e.g., fade-in wicks, hover highlights).

I already have sample JSON price feeds; what’s missing is the Canvas layer that can take those feeds and draw the charts at 60 fps while keeping memory use under control. Code structure matters as much as visuals—I plan to extend the tool later, so modules, clear separation of rendering logic, and concise comments are essential.

Deliverables
• A well-organised JavaScript/TypeScript codebase that boots with npm/yarn and outputs the three chart types on an HTML page.
• Built-in zoom/pan, animation toggles and a helper for custom candle effects.
• A short architecture document (markdown is fine) explaining the key classes and render loop so I can maintain or scale the project myself.

Acceptance Criteria
1. Rendering stays above 55 fps on a mid-range laptop with 2 years-old Chrome/Firefox.
2. Switching between chart types never requires a page reload.
3. Zoom from 1 day to 1 minute resolution occurs under 200 ms.
4. Code passes eslint-recommended and comes with at least one unit test covering the render pipeline.

If you have previous Canvas-heavy work—especially anything in finance or gaming where frame rate is critical—send a link and a brief note on your approach to architectural layering.

Document will be provide on chat box