JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 25
  • Score
    100M100P100Q88894F
  • License MIT

Canvas rendering engine for @tradecanvas/chart

Package Exports

  • @tradecanvas/core

Readme

@tradecanvas/core

Canvas rendering engine, indicators, drawing tools, trading overlays, and real-time streaming for the @tradecanvas/chart library.

Live Demo | GitHub | Documentation

Install

You don't need to install this package directly. It's included as a dependency of @tradecanvas/chart.

npm install @tradecanvas/chart

What's Inside

Rendering Engine

Multi-layer canvas rendering for optimal performance -- only dirty layers repaint each frame:

  UI Layer      (price axis, legend, live price)      z=3
  Overlay Layer (drawings, trading positions/orders)  z=2
  Main Layer    (candles, indicators, volume)          z=1
  Background    (grid, watermark)                      z=0
  • RenderEngine -- orchestrates the render pipeline
  • LayerManager -- manages canvas layer stack
  • RenderLoop -- requestAnimationFrame loop with dirty tracking
  • DPRManager -- device pixel ratio handling for crisp rendering

Chart Renderers (11 types)

CandlestickRenderer, HollowCandleRenderer, BarRenderer, LineRenderer, AreaRenderer, BaselineRenderer, RenkoRenderer, KagiRenderer, PointAndFigureRenderer, VolumeRenderer, CompareRenderer

Data transforms: toHeikinAshi, toRenko, toLineBreak, toKagi, toPointAndFigure

Indicators (26 built-in)

Overlay (on price chart): SMA, EMA, Bollinger Bands, Keltner Channel, Donchian Channel, Ichimoku Cloud, Parabolic SAR, Supertrend, VWAP

Panel (separate sub-chart): RSI, MACD, Stochastic, ATR, ADX, CCI, CMF, MFI, OBV, ROC, TSI, Williams %R, Volume Profile, VROC, Standard Deviation, Accumulation/Distribution, Aroon

Extensible via IndicatorBase for custom indicators.

Drawing Tools (23)

Trendline, Horizontal/Vertical Lines, Ray, Extended Line, Parallel Channel, Fibonacci Retracement/Extension, Rectangle, Ellipse, Triangle, Arrow, Pitchfork, Gann Fan/Box, Elliott Wave, Regression Channel, Date/Price Range, Measure, Anchored VWAP, Volume Profile Range, Text Annotation

All tools support magnet snapping, undo/redo, and serialization. Extensible via DrawingBase.

Trading

  • TradingManager -- manage positions and orders
  • TradingRenderer -- render entry lines, P&L zones, SL/TP markers
  • OrderRenderer -- render pending orders with drag-to-modify
  • DepthOverlay -- bid/ask depth visualization

Real-Time Streaming

  • StreamManager -- manage data connections with auto-reconnect
  • BinanceAdapter -- built-in Binance WebSocket adapter
  • MockAdapter -- testing and demo data
  • TickAggregator -- aggregate raw ticks into OHLC bars
  • ReconnectManager -- exponential backoff reconnection

Interaction

  • Pan, zoom (wheel/pinch), crosshair tracking
  • Keyboard shortcuts (arrows, +/-, Home/End, Space)
  • Drawing tool interaction with magnet snapping

Features

  • AlertManager -- price and indicator alerts
  • ReplayManager -- bar-by-bar historical replay
  • ChartStateManager -- save/load chart state as JSON
  • UndoRedoManager -- undo/redo for drawings
  • DataExporter -- export visible/all data as CSV or JSON

UI

  • ChartLegend -- OHLCV overlay display
  • Screenshot -- export chart as PNG
  • Watermark -- background text watermark
  • BarCountdown -- time until candle close
  • SessionBreaks -- market session visualization

License

MIT