I built my own zero-dependency financial chart engine with Canvas

Описание и применение

TradeCanvas – это легковесный движок графиков на Canvas без зависимостей, обеспечивающий 60 FPS, эффективный отрисовочный цикл и модульную архитектуру слоев, позволяющий разработчикам создавать торговые панели без лицензий.

Задача

Need a lightweight, cost‑free charting solution for trading dashboards that avoids enterprise licensing, heavy dependencies, and lack of smooth interactions.

Результат

TradeCanvas delivers a lightweight, zero‑dependency financial chart engine with smooth 60 FPS rendering, efficient viewport culling, and modular layer architecture, enabling developers to build trading dashboards without enterprise licensing costs.

Рабочий процесс

• 1. Identify limitations of existing chart libraries.
• 2. Design a Canvas‑based rendering loop with double‑buffering.
• 3. Implement viewport culling for efficient panning.
• 4. Separate rendering layers (grid, candles, crosshair, indicators).
• 5. Add support for multiple timeframes, dynamic scaling, and interactions.
• 6. Integrate live exchange feeds and order placement on the chart.
• 7. Test performance to achieve 60 FPS.
• 8. Release core engine for community use.

Доказательства

Pure Canvas rendering: Direct control over pixel projection, rendering loop, and double-buffering without DOM thrashing.

60 FPS smoothness: Viewport culling so panning across thousands of historical ticks doesn't choke the browser.

Clean separation of layers: Separated the background grid, main candles, crosshair overlay, and indicator pipelines so rendering one doesn't force a full repaint of everything.

Zero vendor lock-in: A clean, standalone library designed for developers who just want full control of their charting stack.