1.0.17 • Published 2 years ago
canvas-percept v1.0.17
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/canvas-percept@1.0.17/dist/percept.js
<script src="https://cdn.jsdelivr.net/npm/canvas-percept@1.0.17/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