@sirhc77/canvas-math-kit

🎯 canvas-math-kit

A lightweight, interactive canvas-based vector visualizer for math, linear algebra, and ML education. Built with React + TypeScript.

Perfect for:

• 📐 Math and ML learning tools
• 🎓 Educational visualizations
• 🧮 Interactive vector diagrams

---

📦 Installation

npm install @sirhc77/canvas-math-kit

📦 Import

import { GraphCanvas, type CanvasVector, type CanvasParallelogram } from '@sirhc77/canvas-math-kit';

---

🎛️ <GraphCanvas /> Props

Prop	Type	Description
width	number	Width of the canvas in pixels
height	number	Height of the canvas in pixels
scale	number	Pixels per unit
vectors	CanvasVector[] (optional)	Vectors to render and optionally drag
onVectorsChange	(updated: CanvasVector[]) => void (optional)	Callback fired when a draggable vector is moved
snap	number | (x: number, y: number) => [number, number] (optional)	Enables snapping to a grid or custom logic
locked	boolean (optional)	If true, disables all dragging
parallelograms	CanvasParallelogram[] (optional)	Areas formed by two vectors, filled and outlined
customDragTargets	DragTarget[] (optional)	Items other than vectors that are draggable
onCustomDragTargetsChange	(updated: DragTarget[]) => void (optional)	Callback fired when a custom drag target is moved
customDraw	(ctx, origin, scale) => void (optional)	Custom canvas drawing logic (runs after vectors and parallelograms)

---

🧩 CanvasVector Type

type VectorHeadStyle = 'arrow' | 'circle' | 'both' | 'none';

interface CanvasVector {
  x: number;
  y: number;
  color?: string;              // Default: 'blue'
  draggable?: boolean;         // Default: false
  headStyle?: VectorHeadStyle; // Default: 'arrow'
  label?: string;
  width?: number;
}

---

🔷 CanvasParallelogram Type

interface CanvasParallelogram {
  vectorA: { x: number; y: number };
  vectorB: { x: number; y: number };
  fillColor?: string;   // Default: translucent blue
  strokeColor?: string; // Default: darker blue
}

---

🧪 Example Usage

<GraphCanvas
  width={400}
  height={400}
  scale={40}
  vectors={[
    { x: 2, y: 1, color: 'red', draggable: true, headStyle: 'both' },
    { x: -1, y: 2, color: 'green', headStyle: 'circle' }
  ]}
  parallelograms={[
    {
      vectorA: { x: 2, y: 1 },
      vectorB: { x: -1, y: 2 },
      fillColor: 'rgba(255, 0, 0, 0.1)',
      strokeColor: 'rgba(255, 0, 0, 0.4)'
    }
  ]}
  snap={1}
  customDraw={(ctx, origin, scale) => {
    const p = (x: number, y: number) => toCanvas(x, y, origin, scale);
    drawLine(ctx, p(-3, 0), p(3, 0), 'black', 1, true);
  }}
/>

---

🧪 Example Projects

Try out the demo locally:

cd demo
npm install
npm run dev

Or check the live demo (coming soon).

---

🛠️ Roadmap

• [x] Draggable vectors
• [x] Snapping support
• [x] Per-vector styling
• [x] Labels
• [ ] Hover highlights
• [ ] Animation support
• [ ] Export to PNG

---

📃 License

MIT