API Reference

Install

npm i vizat

Quick start

import { Wrapper, Canvas, Rect, Line } from "vizat";

const wrapper = new Wrapper("container", { height: "400px", width: "100%" });
const canvas = new Canvas({ height: "400px", width: "800px", background: "#222" });
wrapper.add(canvas);

canvas.add(new Rect({
  x: 40, y: 40, width: 120, height: 80,
  options: { fillStyle: "blueviolet" },
}));

canvas.draw();

Classes

• Wrapper(id, config) — mounts a Canvas into a DOM element
• Canvas(config) — scene root; add(), clear(), draw()
• Line, Rect, Circle, Curve, Text, Gradient, Image

Options

Shape options map to CanvasRenderingContext2D — strokeStyle, fillStyle, lineWidth, dash, rotation, shadows, fonts.

Playground

Live demo: /playground