Version: 1.0.0
Canvas Rendering Target
The chart rendering engine exposes a raw HTML5 CanvasRenderingContext2D context inside custom drawings, series renderers, and pane primitives. Understanding the canvas structure allows you to correctly map logical coordinates to pixel coordinates.
Coordinate Spaces
The canvas maps logical indexes and price coordinates to canvas positions using helper methods. Do not write hardcoded pixel positions because the chart scales, zooms, and translates dynamically:
- X-Coordinate (Time): Maps to the bar index. The helper method
chart.barToX(barIndex)returns the absolute X coordinate in the main viewport. - Y-Coordinate (Price): Maps to price values. The helper method
chart.priceToY(price, minPrice, maxPrice)converts raw prices to absolute Y coordinates.
Context State Safety
The chart engine shares the canvas context between multiple visual components. When writing custom rendering code, always protect the global context properties (colors, line styles, clipping regions) by wrapping your code with:
ctx.save();
// Perform all styles, offsets, and fillRect/stroke operations here
ctx.fillStyle = '#2962ff';
ctx.beginPath();
// ...
ctx.restore(); // Restores context back to chart default configuration
// Perform all styles, offsets, and fillRect/stroke operations here
ctx.fillStyle = '#2962ff';
ctx.beginPath();
// ...
ctx.restore(); // Restores context back to chart default configuration