Working with HTML5 canvas can be quite difficult, especially if you're making an animation, game, or adding interactivity. Percept provides an easy-to-use API for rendering on canvas.

percept.saurabhagat.me

• API Documentation
• Examples
• Online Playground

Installation & Usage

Node

npm i canvas-percept

or

yarn add canvas-percept

import * as Percept from "canvas-percept";

CDN

https://cdn.jsdelivr.net/npm/[email protected]/dist/percept.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/percept.js"></script>

Example

Drawing a simple draggable rotating shape

let canvas = new Percept.Canvas(document.getElementById("canvas"));

let shape = new Percept.View.Rectangle(
  "rect",
  new Percept.Vector(canvas.width / 2, canvas.height / 2),
  100,
  30,
  {
    fill: true,
    fillColor: new Percept.View.LinearGradient(
      Percept.Vector.Zero(),
      45,
      Percept.Handle.AUTO,
      ["#57cfd2", "#987bd2", "#ffd966"],
      [0, 0.5, 1]
    ),
    shadowColor: "#000",
    shadowBlur: 5,
  }
);
let text = new Percept.View.Text(
  "caption",
  new Percept.Vector(80, 0),
  "Drag Me !",
  { font: "bold 12px Arial", fillColor: "green" }
);

text.parent = shape;

shape.on("drag", (view, pos) => (view.position = pos));
shape.on("update", () => {
  shape.props.fillColor.degrees -= 5;
  shape.localRotation += 1;
  text.rotation -= 1;
});

let drawing = new Percept.Drawing(canvas);
drawing.add(shape);

canvas.draw(drawing);

See this in action in the Playground !

Build & Local Development

To output all module types, run

npm run build

To target a specific type, run

# CommonJS modules
npm run build:cjs

# ECMAScript (ES) modules
npm run build:esm

# UMD modules
npm run build:umd

API Documentation is generated using TypeDoc

npm run docs

Testing

Run tests with coverage using Jest

npm run test

Website source

See percept-site

License

MIT

Copyright © 2021-present | Saurabh Bhagat