canvas-percept
v1.0.22
Published
HTML5 Canvas rendering engine
Downloads
15
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