@sirhc77/canvas-math-kit NPM

🎯 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);
  }}
/>