@tranding-custom-chart/renderer-canvas 0.0.0-stage → 2.0.0

package/dist/renderers/crosshair-renderer.js

@@ -0,0 +1,71 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/crosshair-renderer.ts
+ * Interactive crosshair guidelines, price/time axis badges, and highlight markers.
+ */
+import { snapLine } from '../dpi.js';
+export function renderCrosshair(options) {
+    const { ctx, bounds, padding, x, y, theme, dpr, xLabel, yLabel, showHorizontalLine = true } = options;
+    const left = padding.left;
+    const right = bounds.width - padding.right;
+    const top = padding.top;
+    const bottom = bounds.height - padding.bottom;
+    // X must fall within chart plot area
+    if (x < left || x > right)
+        return;
+    // If drawing horizontal line, Y must also fall within bounds
+    if (showHorizontalLine && (y < top || y > bottom))
+        return;
+    const snappedX = snapLine(x, dpr);
+    ctx.save();
+    ctx.strokeStyle = theme.crosshairLine;
+    ctx.lineWidth = 1;
+    ctx.setLineDash([3, 3]);
+    // Vertical guideline
+    ctx.beginPath();
+    ctx.moveTo(snappedX, top);
+    ctx.lineTo(snappedX, bottom);
+    ctx.stroke();
+    // Horizontal guideline
+    if (showHorizontalLine && y >= top && y <= bottom) {
+        const snappedY = snapLine(y, dpr);
+        ctx.beginPath();
+        ctx.moveTo(left, snappedY);
+        ctx.lineTo(right, snappedY);
+        ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    ctx.font = '10px monospace';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    // Y-Axis Price Badge (Right margin)
+    if (yLabel && showHorizontalLine && y >= top && y <= bottom) {
+        const textWidth = ctx.measureText(yLabel).width;
+        const badgeWidth = textWidth + 12;
+        const badgeHeight = 18;
+        const badgeX = right + 2;
+        const badgeY = y - badgeHeight / 2;
+        ctx.fillStyle = theme.surfaceBorder;
+        ctx.beginPath();
+        ctx.roundRect?.(badgeX, badgeY, badgeWidth, badgeHeight, 3);
+        ctx.fill();
+        ctx.fillStyle = theme.textPrimary;
+        ctx.textAlign = 'left';
+        ctx.fillText(yLabel, badgeX + 6, y);
+    }
+    // X-Axis Time Badge (Bottom margin)
+    if (xLabel) {
+        const textWidth = ctx.measureText(xLabel).width;
+        const badgeWidth = textWidth + 12;
+        const badgeHeight = 18;
+        const badgeX = Math.max(left, Math.min(right - badgeWidth, x - badgeWidth / 2));
+        const badgeY = bottom + 2;
+        ctx.fillStyle = theme.surfaceBorder;
+        ctx.beginPath();
+        ctx.roundRect?.(badgeX, badgeY, badgeWidth, badgeHeight, 3);
+        ctx.fill();
+        ctx.fillStyle = theme.textPrimary;
+        ctx.textAlign = 'center';
+        ctx.fillText(xLabel, badgeX + badgeWidth / 2, badgeY + badgeHeight / 2);
+    }
+    ctx.restore();
+}

package/dist/renderers/curved-line-renderer.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/curved-line-renderer.ts
+ * Canvas 2D renderer for Catmull-Rom cubic Bezier curved lines and gradient areas.
+ */
+import { type Point } from '@tranding-custom-chart/core';
+export interface CurvedLineOptions {
+    readonly strokeColor?: string | undefined;
+    readonly strokeWidth?: number | undefined;
+    readonly tension?: number | undefined;
+    readonly areaFill?: {
+        readonly gradientTopColor: string;
+        readonly gradientBottomColor: string;
+        readonly baselineY: number;
+    } | undefined;
+}
+export declare function renderCurvedLine(ctx: CanvasRenderingContext2D, points: readonly Point[], options?: CurvedLineOptions): void;
+//# sourceMappingURL=curved-line-renderer.d.ts.map

package/dist/renderers/curved-line-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"curved-line-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/curved-line-renderer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAmC,KAAK,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAE1F,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,QAAQ,CAAC,QAAQ,CAAC,EACd;QACE,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;QAClC,QAAQ,CAAC,mBAAmB,EAAE,MAAM,CAAC;QACrC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;KAC5B,GACD,SAAS,CAAC;CACf;AAED,wBAAgB,gBAAgB,CAC9B,GAAG,EAAE,wBAAwB,EAC7B,MAAM,EAAE,SAAS,KAAK,EAAE,EACxB,OAAO,GAAE,iBAAsB,GAC9B,IAAI,CAqDN"}

package/dist/renderers/curved-line-renderer.js

@@ -0,0 +1,46 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/curved-line-renderer.ts
+ * Canvas 2D renderer for Catmull-Rom cubic Bezier curved lines and gradient areas.
+ */
+import { computeCatmullRomBezierSegments } from '@tranding-custom-chart/core';
+export function renderCurvedLine(ctx, points, options = {}) {
+    if (points.length < 2)
+        return;
+    const { strokeColor = '#3b82f6', strokeWidth = 2, tension = 0.8, areaFill, } = options;
+    const segments = computeCatmullRomBezierSegments(points, tension);
+    if (segments.length === 0)
+        return;
+    ctx.save();
+    // 1. Optional Area Fill
+    if (areaFill) {
+        const first = points[0];
+        const last = points[points.length - 1];
+        const minY = Math.min(...points.map((p) => p.y));
+        const gradient = ctx.createLinearGradient(0, minY, 0, areaFill.baselineY);
+        gradient.addColorStop(0, areaFill.gradientTopColor);
+        gradient.addColorStop(1, areaFill.gradientBottomColor);
+        ctx.beginPath();
+        ctx.moveTo(first.x, first.y);
+        for (const seg of segments) {
+            ctx.bezierCurveTo(seg.cp1.x, seg.cp1.y, seg.cp2.x, seg.cp2.y, seg.p2.x, seg.p2.y);
+        }
+        ctx.lineTo(last.x, areaFill.baselineY);
+        ctx.lineTo(first.x, areaFill.baselineY);
+        ctx.closePath();
+        ctx.fillStyle = gradient;
+        ctx.fill();
+    }
+    // 2. Continuous Curved Line Stroke
+    ctx.beginPath();
+    const first = points[0];
+    ctx.moveTo(first.x, first.y);
+    for (const seg of segments) {
+        ctx.bezierCurveTo(seg.cp1.x, seg.cp1.y, seg.cp2.x, seg.cp2.y, seg.p2.x, seg.p2.y);
+    }
+    ctx.lineWidth = strokeWidth;
+    ctx.strokeStyle = strokeColor;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.stroke();
+    ctx.restore();
+}

package/dist/renderers/drawing-renderer.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/drawing-renderer.ts
+ * Interactive technical drawing renderer: Trendlines, Horizontal Support/Resistance Rays,
+ * and Price/Bar Range Measurement tools.
+ */
+import type { Dimension, DrawingHandleType, DrawingItem, Padding, Scale } from '@tranding-custom-chart/core';
+export interface DrawingRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly drawings: readonly DrawingItem[];
+    readonly xScale: Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly bounds: Dimension;
+    readonly padding: Padding;
+    readonly dpr: number;
+    readonly selectedDrawingId?: string | null | undefined;
+    readonly activeHandle?: DrawingHandleType | null | undefined;
+}
+export declare function renderDrawings(options: DrawingRenderOptions): void;
+//# sourceMappingURL=drawing-renderer.d.ts.map

package/dist/renderers/drawing-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawing-renderer.d.ts","sourceRoot":"","sources":["../../src/renderers/drawing-renderer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAE7G,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,GAAG,EAAE,wBAAwB,CAAC;IACvC,QAAQ,CAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,CAAC;IAC1C,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,MAAM,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACvD,QAAQ,CAAC,YAAY,CAAC,EAAE,iBAAiB,GAAG,IAAI,GAAG,SAAS,CAAC;CAC9D;AA4CD,wBAAgB,cAAc,CAAC,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAkflE"}

package/dist/renderers/drawing-renderer.js

@@ -0,0 +1,487 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/drawing-renderer.ts
+ * Interactive technical drawing renderer: Trendlines, Horizontal Support/Resistance Rays,
+ * and Price/Bar Range Measurement tools.
+ */
+function drawControlHandle(ctx, x, y, isActive, isLocked) {
+    ctx.save();
+    ctx.beginPath();
+    const radius = isActive ? 7 : 5;
+    ctx.arc(x, y, radius, 0, Math.PI * 2);
+    ctx.fillStyle = isLocked ? '#f59e0b' : '#ffffff';
+    ctx.fill();
+    ctx.strokeStyle = isLocked ? '#78350f' : '#2563eb';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    ctx.restore();
+}
+function drawSelectionBadge(ctx, x, y, label, isLocked) {
+    ctx.save();
+    ctx.font = 'bold 9px sans-serif';
+    const width = ctx.measureText(label).width + 12;
+    const height = 16;
+    ctx.fillStyle = isLocked ? 'rgba(120, 53, 15, 0.9)' : 'rgba(30, 41, 59, 0.9)';
+    ctx.strokeStyle = isLocked ? '#f59e0b' : '#3b82f6';
+    ctx.lineWidth = 1;
+    ctx.fillRect(x - width / 2, y - height - 4, width, height);
+    ctx.strokeRect(x - width / 2, y - height - 4, width, height);
+    ctx.fillStyle = '#ffffff';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(label, x, y - height / 2 - 4);
+    ctx.restore();
+}
+export function renderDrawings(options) {
+    const { ctx, drawings, xScale, yScale, bounds, padding, selectedDrawingId, activeHandle } = options;
+    if (drawings.length === 0)
+        return;
+    const chartLeft = padding.left;
+    const chartRight = bounds.width - padding.right;
+    ctx.save();
+    for (const item of drawings) {
+        if (item.visible === false)
+            continue;
+        const isSelected = selectedDrawingId === item.id;
+        const isLocked = Boolean(item.locked);
+        const strokeWidth = item.strokeWidth ?? (isSelected ? 2.5 : 2);
+        const opacity = item.opacity ?? 1.0;
+        ctx.save();
+        ctx.globalAlpha = opacity;
+        if (isSelected) {
+            ctx.shadowColor = isLocked ? 'rgba(245, 158, 11, 0.6)' : 'rgba(59, 130, 246, 0.6)';
+            ctx.shadowBlur = 8;
+        }
+        if (item.type === 'trendline') {
+            const x1 = xScale.scale(item.p1.index);
+            const y1 = yScale.scale(item.p1.price);
+            const x2 = xScale.scale(item.p2.index);
+            const y2 = yScale.scale(item.p2.price);
+            const color = item.color ?? '#60a5fa';
+            // Line
+            ctx.strokeStyle = color;
+            ctx.lineWidth = strokeWidth;
+            if (item.lineDash && item.lineDash.length > 0) {
+                ctx.setLineDash([...item.lineDash]);
+            }
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.shadowBlur = 0;
+            // Handles
+            if (isSelected) {
+                drawControlHandle(ctx, x1, y1, activeHandle === 'p1', isLocked);
+                drawControlHandle(ctx, x2, y2, activeHandle === 'p2', isLocked);
+                const midX = (x1 + x2) / 2;
+                const midY = (y1 + y2) / 2;
+                drawSelectionBadge(ctx, midX, midY, isLocked ? '🔒 Trendline (Locked)' : 'Trendline', isLocked);
+            }
+            else {
+                ctx.fillStyle = '#ffffff';
+                for (const [hx, hy] of [[x1, y1], [x2, y2]]) {
+                    ctx.beginPath();
+                    ctx.arc(hx, hy, 3.5, 0, Math.PI * 2);
+                    ctx.fill();
+                    ctx.stroke();
+                }
+            }
+        }
+        else if (item.type === 'horizontal_line') {
+            const y = yScale.scale(item.price);
+            const color = item.color ?? '#f59e0b';
+            ctx.strokeStyle = color;
+            ctx.lineWidth = strokeWidth;
+            ctx.setLineDash(item.lineDash && item.lineDash.length > 0 ? [...item.lineDash] : [4, 4]);
+            ctx.beginPath();
+            ctx.moveTo(chartLeft, y);
+            ctx.lineTo(chartRight, y);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.shadowBlur = 0;
+            // Handles if selected
+            if (isSelected) {
+                drawControlHandle(ctx, chartLeft + 15, y, false, isLocked);
+                drawControlHandle(ctx, (chartLeft + chartRight) / 2, y, activeHandle === 'body', isLocked);
+                drawControlHandle(ctx, chartRight - 15, y, false, isLocked);
+            }
+            // Label badge
+            const label = item.label ?? `Level: ₹${item.price.toFixed(2)}${isLocked ? ' 🔒' : ''}`;
+            ctx.font = '10px monospace';
+            ctx.fillStyle = color;
+            ctx.fillRect(chartRight + 2, y - 9, ctx.measureText(label).width + 8, 18);
+            ctx.fillStyle = '#ffffff';
+            ctx.textAlign = 'left';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(label, chartRight + 6, y);
+        }
+        else if (item.type === 'measure') {
+            const x1 = xScale.scale(item.p1.index);
+            const y1 = yScale.scale(item.p1.price);
+            const x2 = xScale.scale(item.p2.index);
+            const y2 = yScale.scale(item.p2.price);
+            const left = Math.min(x1, x2);
+            const top = Math.min(y1, y2);
+            const boxWidth = Math.abs(x2 - x1);
+            const boxHeight = Math.abs(y2 - y1);
+            const deltaPrice = item.p2.price - item.p1.price;
+            const pctChange = (deltaPrice / (item.p1.price || 1)) * 100;
+            const deltaBars = Math.abs(item.p2.index - item.p1.index);
+            const isPositive = deltaPrice >= 0;
+            const boxBg = isPositive ? 'rgba(22, 121, 76, 0.20)' : 'rgba(180, 35, 24, 0.20)';
+            const boxBorder = isPositive ? '#16794c' : '#b42318';
+            // Shaded measuring rectangle
+            ctx.fillStyle = boxBg;
+            ctx.fillRect(left, top, boxWidth, boxHeight);
+            ctx.strokeStyle = boxBorder;
+            ctx.lineWidth = strokeWidth;
+            ctx.setLineDash(item.lineDash && item.lineDash.length > 0 ? [...item.lineDash] : [2, 2]);
+            ctx.strokeRect(left, top, boxWidth, boxHeight);
+            ctx.setLineDash([]);
+            // Arrow diagonal line
+            ctx.strokeStyle = boxBorder;
+            ctx.lineWidth = 1.5;
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+            ctx.stroke();
+            ctx.shadowBlur = 0;
+            // Measurement Info Badge in center
+            const badgeX = left + boxWidth / 2;
+            const badgeY = top + boxHeight / 2;
+            const sign = isPositive ? '+' : '';
+            const textLine1 = `${sign}₹${deltaPrice.toFixed(2)} (${sign}${pctChange.toFixed(2)}%)`;
+            const textLine2 = `${deltaBars} bars${isLocked ? ' 🔒' : ''}`;
+            ctx.font = 'bold 11px monospace';
+            const w1 = ctx.measureText(textLine1).width;
+            ctx.font = '10px sans-serif';
+            const w2 = ctx.measureText(textLine2).width;
+            const cardWidth = Math.max(w1, w2) + 16;
+            const cardHeight = 36;
+            ctx.fillStyle = '#181b19';
+            ctx.strokeStyle = boxBorder;
+            ctx.lineWidth = 1;
+            ctx.fillRect(badgeX - cardWidth / 2, badgeY - cardHeight / 2, cardWidth, cardHeight);
+            ctx.strokeRect(badgeX - cardWidth / 2, badgeY - cardHeight / 2, cardWidth, cardHeight);
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillStyle = isPositive ? '#34d399' : '#f87171';
+            ctx.font = 'bold 11px monospace';
+            ctx.fillText(textLine1, badgeX, badgeY - 7);
+            ctx.fillStyle = '#858e89';
+            ctx.font = '10px sans-serif';
+            ctx.fillText(textLine2, badgeX, badgeY + 8);
+            if (isSelected) {
+                drawControlHandle(ctx, x1, y1, activeHandle === 'p1', isLocked);
+                drawControlHandle(ctx, x2, y2, activeHandle === 'p2', isLocked);
+            }
+        }
+        else if (item.type === 'vertical_line') {
+            const x = xScale.scale(item.index);
+            const color = item.color ?? '#8b5cf6';
+            ctx.strokeStyle = color;
+            ctx.lineWidth = strokeWidth;
+            ctx.setLineDash(item.lineDash && item.lineDash.length > 0 ? [...item.lineDash] : [4, 4]);
+            ctx.beginPath();
+            ctx.moveTo(x, padding.top);
+            ctx.lineTo(x, bounds.height - padding.bottom);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.shadowBlur = 0;
+            if (isSelected) {
+                drawControlHandle(ctx, x, padding.top + 15, false, isLocked);
+                drawControlHandle(ctx, x, bounds.height / 2, activeHandle === 'body', isLocked);
+                drawControlHandle(ctx, x, bounds.height - padding.bottom - 15, false, isLocked);
+            }
+            const label = item.label ?? `Bar #${item.index}${isLocked ? ' 🔒' : ''}`;
+            ctx.font = '10px monospace';
+            ctx.fillStyle = color;
+            ctx.fillRect(x - 25, bounds.height - padding.bottom + 2, 50, 16);
+            ctx.fillStyle = '#ffffff';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(label, x, bounds.height - padding.bottom + 10);
+        }
+        else if (item.type === 'rectangle') {
+            const x1 = xScale.scale(item.p1.index);
+            const y1 = yScale.scale(item.p1.price);
+            const x2 = xScale.scale(item.p2.index);
+            const y2 = yScale.scale(item.p2.price);
+            const left = Math.min(x1, x2);
+            const top = Math.min(y1, y2);
+            const width = Math.abs(x2 - x1);
+            const height = Math.abs(y2 - y1);
+            const borderColor = item.color ?? '#3b82f6';
+            const fillColor = item.fillColor ?? 'rgba(59, 130, 246, 0.15)';
+            ctx.fillStyle = fillColor;
+            ctx.fillRect(left, top, width, height);
+            ctx.strokeStyle = borderColor;
+            ctx.lineWidth = strokeWidth;
+            if (item.lineDash && item.lineDash.length > 0) {
+                ctx.setLineDash([...item.lineDash]);
+            }
+            ctx.strokeRect(left, top, width, height);
+            ctx.setLineDash([]);
+            ctx.shadowBlur = 0;
+            // Corner handles
+            const corners = [
+                [left, top, 'p1'],
+                [left + width, top, 'p2'],
+                [left, top + height, 'p1'],
+                [left + width, top + height, 'p2'],
+            ];
+            for (const [cx, cy, hType] of corners) {
+                if (isSelected) {
+                    drawControlHandle(ctx, cx, cy, activeHandle === hType, isLocked);
+                }
+                else {
+                    ctx.beginPath();
+                    ctx.arc(cx, cy, 3, 0, Math.PI * 2);
+                    ctx.fillStyle = '#ffffff';
+                    ctx.fill();
+                    ctx.stroke();
+                }
+            }
+            if (isSelected) {
+                drawSelectionBadge(ctx, left + width / 2, top, isLocked ? '🔒 Rectangle' : 'Rectangle', isLocked);
+            }
+        }
+        else if (item.type === 'fibonacci') {
+            const x1 = xScale.scale(item.p1.index);
+            const x2 = xScale.scale(item.p2.index);
+            const startX = Math.min(x1, x2);
+            const endX = Math.max(Math.max(x1, x2) + 50, chartRight);
+            const levels = item.levels ?? [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1.0];
+            const pLow = Math.min(item.p1.price, item.p2.price);
+            const pHigh = Math.max(item.p1.price, item.p2.price);
+            const pDiff = pHigh - pLow;
+            const isRetraceUp = item.p1.price < item.p2.price;
+            const levelColors = {
+                0: '#94a3b8',
+                0.236: '#ef4444',
+                0.382: '#f59e0b',
+                0.5: '#10b981',
+                0.618: '#eab308',
+                0.786: '#3b82f6',
+                1.0: '#94a3b8',
+            };
+            const y382 = yScale.scale(isRetraceUp ? pHigh - 0.382 * pDiff : pLow + 0.382 * pDiff);
+            const y618 = yScale.scale(isRetraceUp ? pHigh - 0.618 * pDiff : pLow + 0.618 * pDiff);
+            ctx.fillStyle = 'rgba(234, 179, 8, 0.12)';
+            ctx.fillRect(startX, Math.min(y382, y618), endX - startX, Math.abs(y618 - y382));
+            // Trend anchor diagonal
+            ctx.strokeStyle = 'rgba(148, 163, 184, 0.4)';
+            ctx.lineWidth = 1;
+            ctx.setLineDash([2, 2]);
+            ctx.beginPath();
+            ctx.moveTo(x1, yScale.scale(item.p1.price));
+            ctx.lineTo(x2, yScale.scale(item.p2.price));
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.shadowBlur = 0;
+            for (const ratio of levels) {
+                const price = isRetraceUp ? pHigh - ratio * pDiff : pLow + ratio * pDiff;
+                const y = yScale.scale(price);
+                const color = levelColors[ratio] ?? '#94a3b8';
+                ctx.strokeStyle = color;
+                ctx.lineWidth = ratio === 0.618 || ratio === 0.5 ? 1.5 : 1;
+                ctx.beginPath();
+                ctx.moveTo(startX, y);
+                ctx.lineTo(endX, y);
+                ctx.stroke();
+                const labelText = `${ratio} (₹${price.toFixed(1)})`;
+                ctx.font = '9px monospace';
+                ctx.fillStyle = color;
+                ctx.textAlign = 'left';
+                ctx.textBaseline = 'bottom';
+                ctx.fillText(labelText, startX + 4, y - 2);
+            }
+            if (isSelected) {
+                drawControlHandle(ctx, x1, yScale.scale(item.p1.price), activeHandle === 'p1', isLocked);
+                drawControlHandle(ctx, x2, yScale.scale(item.p2.price), activeHandle === 'p2', isLocked);
+                drawSelectionBadge(ctx, (x1 + x2) / 2, yScale.scale(item.p1.price), isLocked ? '🔒 Fibonacci' : 'Fibonacci', isLocked);
+            }
+        }
+        else if (item.type === 'ray') {
+            const x1 = xScale.scale(item.p1.index);
+            const y1 = yScale.scale(item.p1.price);
+            const x2 = xScale.scale(item.p2.index);
+            const y2 = yScale.scale(item.p2.price);
+            const color = item.color ?? '#38bdf8';
+            const dx = x2 - x1;
+            const dy = y2 - y1;
+            let targetX = chartRight;
+            let targetY = y2;
+            if (Math.abs(dx) > 0.001) {
+                const slope = dy / dx;
+                targetX = dx > 0 ? chartRight : chartLeft;
+                targetY = y1 + slope * (targetX - x1);
+            }
+            ctx.strokeStyle = color;
+            ctx.lineWidth = strokeWidth;
+            if (item.lineDash && item.lineDash.length > 0) {
+                ctx.setLineDash([...item.lineDash]);
+            }
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(targetX, targetY);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.shadowBlur = 0;
+            if (isSelected) {
+                drawControlHandle(ctx, x1, y1, activeHandle === 'p1', isLocked);
+                drawControlHandle(ctx, x2, y2, activeHandle === 'p2', isLocked);
+                drawSelectionBadge(ctx, x1, y1, isLocked ? '🔒 Ray' : 'Ray', isLocked);
+            }
+            else {
+                ctx.fillStyle = '#ffffff';
+                ctx.beginPath();
+                ctx.arc(x1, y1, 4, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.stroke();
+            }
+        }
+        else if (item.type === 'channel') {
+            const x1 = xScale.scale(item.p1.index);
+            const y1 = yScale.scale(item.p1.price);
+            const x2 = xScale.scale(item.p2.index);
+            const y2 = yScale.scale(item.p2.price);
+            const offsetPrice = item.channelWidthPrice ?? (Math.abs(item.p2.price - item.p1.price) * 0.4 || 15);
+            const y1Offset = yScale.scale(item.p1.price - offsetPrice);
+            const y2Offset = yScale.scale(item.p2.price - offsetPrice);
+            const color = item.color ?? '#818cf8';
+            const fillColor = item.fillColor ?? 'rgba(129, 140, 248, 0.15)';
+            ctx.fillStyle = fillColor;
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+            ctx.lineTo(x2, y2Offset);
+            ctx.lineTo(x1, y1Offset);
+            ctx.closePath();
+            ctx.fill();
+            ctx.strokeStyle = color;
+            ctx.lineWidth = strokeWidth;
+            if (item.lineDash && item.lineDash.length > 0) {
+                ctx.setLineDash([...item.lineDash]);
+            }
+            ctx.beginPath();
+            ctx.moveTo(x1, y1);
+            ctx.lineTo(x2, y2);
+            ctx.moveTo(x1, y1Offset);
+            ctx.lineTo(x2, y2Offset);
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.shadowBlur = 0;
+            if (isSelected) {
+                drawControlHandle(ctx, x1, y1, activeHandle === 'p1', isLocked);
+                drawControlHandle(ctx, x2, y2, activeHandle === 'p2', isLocked);
+                drawControlHandle(ctx, x1, y1Offset, activeHandle === 'channelOffset', isLocked);
+                drawControlHandle(ctx, x2, y2Offset, activeHandle === 'channelOffset', isLocked);
+                drawSelectionBadge(ctx, (x1 + x2) / 2, (y1 + y2) / 2, isLocked ? '🔒 Channel' : 'Channel', isLocked);
+            }
+        }
+        else if (item.type === 'text') {
+            const x = xScale.scale(item.p1.index);
+            const y = yScale.scale(item.p1.price);
+            const text = item.text || 'Note';
+            const color = item.color ?? '#f8fafc';
+            const bgColor = item.bgColor ?? '#1e293b';
+            ctx.font = '11px sans-serif';
+            const textWidth = ctx.measureText(text).width;
+            const padX = 6;
+            const padY = 4;
+            const boxW = textWidth + padX * 2;
+            const boxH = 20;
+            ctx.fillStyle = bgColor;
+            ctx.strokeStyle = isSelected ? (isLocked ? '#f59e0b' : '#3b82f6') : '#475569';
+            ctx.lineWidth = isSelected ? 2 : 1;
+            ctx.fillRect(x - boxW / 2, y - boxH - 6, boxW, boxH);
+            ctx.strokeRect(x - boxW / 2, y - boxH - 6, boxW, boxH);
+            ctx.fillStyle = color;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(text, x, y - boxH / 2 - 6);
+            // Anchor triangle
+            ctx.fillStyle = bgColor;
+            ctx.beginPath();
+            ctx.moveTo(x - 4, y - 6);
+            ctx.lineTo(x + 4, y - 6);
+            ctx.lineTo(x, y - 1);
+            ctx.closePath();
+            ctx.fill();
+            ctx.shadowBlur = 0;
+            if (isSelected) {
+                drawControlHandle(ctx, x, y - 1, activeHandle === 'p1', isLocked);
+            }
+        }
+        else if (item.type === 'arrow') {
+            const x = xScale.scale(item.p1.index);
+            const y = yScale.scale(item.p1.price);
+            const dir = item.direction ?? 'up';
+            const color = item.color ?? (dir === 'up' ? '#10b981' : '#ef4444');
+            ctx.fillStyle = color;
+            ctx.strokeStyle = color;
+            ctx.lineWidth = strokeWidth;
+            ctx.beginPath();
+            if (dir === 'up') {
+                ctx.moveTo(x, y + 18);
+                ctx.lineTo(x, y + 4);
+                ctx.stroke();
+                ctx.beginPath();
+                ctx.moveTo(x - 5, y + 8);
+                ctx.lineTo(x + 5, y + 8);
+                ctx.lineTo(x, y + 1);
+                ctx.closePath();
+                ctx.fill();
+            }
+            else {
+                ctx.moveTo(x, y - 18);
+                ctx.lineTo(x, y - 4);
+                ctx.stroke();
+                ctx.beginPath();
+                ctx.moveTo(x - 5, y - 8);
+                ctx.lineTo(x + 5, y - 8);
+                ctx.lineTo(x, y - 1);
+                ctx.closePath();
+                ctx.fill();
+            }
+            ctx.shadowBlur = 0;
+            if (item.label) {
+                ctx.font = 'bold 10px sans-serif';
+                ctx.textAlign = 'center';
+                ctx.fillText(item.label, x, dir === 'up' ? y + 28 : y - 22);
+            }
+            if (isSelected) {
+                drawControlHandle(ctx, x, y, activeHandle === 'p1', isLocked);
+            }
+        }
+        else if (item.type === 'freehand') {
+            const pts = item.points;
+            if (pts.length > 0) {
+                const color = item.color ?? '#ec4899';
+                ctx.strokeStyle = color;
+                ctx.lineWidth = strokeWidth;
+                if (item.lineDash && item.lineDash.length > 0) {
+                    ctx.setLineDash([...item.lineDash]);
+                }
+                ctx.beginPath();
+                const startX = xScale.scale(pts[0].index);
+                const startY = yScale.scale(pts[0].price);
+                ctx.moveTo(startX, startY);
+                for (let i = 1; i < pts.length; i++) {
+                    ctx.lineTo(xScale.scale(pts[i].index), yScale.scale(pts[i].price));
+                }
+                ctx.stroke();
+                ctx.setLineDash([]);
+                ctx.shadowBlur = 0;
+                if (isSelected) {
+                    drawControlHandle(ctx, startX, startY, activeHandle === 'p1', isLocked);
+                    const endPt = pts[pts.length - 1];
+                    drawControlHandle(ctx, xScale.scale(endPt.index), yScale.scale(endPt.price), activeHandle === 'p2', isLocked);
+                }
+            }
+        }
+        ctx.restore();
+    }
+    ctx.restore();
+}

package/dist/renderers/grid-renderer.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @file packages/chart-renderer-canvas/src/renderers/grid-renderer.ts
+ * Crisp gridlines, axes, and tick text labels.
+ */
+import type { ChartTheme, Dimension, LineStyle, Padding, Scale } from '@tranding-custom-chart/core';
+export interface GridRenderOptions {
+    readonly ctx: CanvasRenderingContext2D;
+    readonly bounds: Dimension;
+    readonly padding: Padding;
+    readonly xScale: Scale<number>;
+    readonly yScale: Scale<number>;
+    readonly theme: ChartTheme;
+    readonly dpr: number;
+    readonly xTickFormatter?: ((val: number) => string) | undefined;
+    readonly yTickFormatter?: ((val: number) => string) | undefined;
+    readonly showXGrid?: boolean | undefined;
+    readonly showYGrid?: boolean | undefined;
+    readonly gridStyle?: LineStyle | undefined;
+    /** Y-Axis label position: 'left', 'right' (default), or 'both' for dual axes */
+    readonly yAxisPosition?: 'left' | 'right' | 'both' | undefined;
+    /** Secondary Y-Scale for dual-axis mixed charts */
+    readonly secondaryYScale?: Scale<number> | undefined;
+    readonly secondaryYTickFormatter?: ((val: number) => string) | undefined;
+}
+export declare function renderGridAndAxes(options: GridRenderOptions): void;
+//# sourceMappingURL=grid-renderer.d.ts.map