canvas-percept
v1.0.22
Published
HTML5 Canvas rendering engine
Downloads
5
Maintainers
Readme
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.
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
Copyright © 2021-present | Saurabh Bhagat