A lightweight 2D rendering and linear algebra framework for the HTML Canvas
Vectra provides geometric primitives, affine transformations, color manipulation, input handling and a renderer that abstracts the native Canvas context — so you can draw shapes, apply transforms and structure scenes without touching the raw API.
Import the library and draw straight to a canvas. The minimal example below runs in a single file with no build step required.
Use the library directly from jsDelivr — the quickest way to get started, with no files to download:
import { Vector2 } from "https://cdn.jsdelivr.net/gh/caetanoag/Vectra/lib/index.js";
const v = new Vector2(2, 2);
console.log(v.toString());
Cloning installs the whole repository, but you only need the
lib/ directory, so you can delete everything else:
git clone https://github.com/caetanoag/Vectra.git && cd Vectra
Run the commands below from the parent folder — the first prints
everything that will be deleted (make sure it looks correct), the
second removes every file except lib/:
# Prints everything that will be deleted; make sure it looks correct
find ./Vectra/ -mindepth 1 -path "./Vectra/lib" -prune -o -print
# Deletes everything in Vectra/, except the lib directory
find ./Vectra/ -mindepth 1 -path "./Vectra/lib" -prune -o -exec rm -rf {} +
Then import from ./Vectra/lib/index.js (or copy the
lib/ folder into your project).
import { CanvasRenderer, Color, Rect, Vector2 } from "./lib/index.js";
const canvas = document.getElementById("canvas");
const renderer = new CanvasRenderer(canvas);
renderer.setSize(800, 600);
renderer.clear();
renderer.fillRect(new Rect(0, 0, 800, 600), Color.fromHex("#2c3e50"));
renderer.fillRect(new Rect(50, 50, 200, 100), Color.fromRgb(52, 152, 219));
renderer.strokeRect(new Rect(50, 50, 200, 100), Color.white(), 2);
renderer.fillCircle(new Vector2(400, 200), 80, Color.fromRgb(231, 76, 60));