Canviz
A souped-up, animated, dataviz oriented canvas for the browser, React, and nodejs.
WIP.
Features
- Automatic and transparent DPI scaling (
devicePixelRatio
is handled for you) - Normalized, polyfilled cross-browser API
- Optional handy-dandy React component
Coming Soon
- A nifty animation framework
Installation
Via NPM:
npm install canviz
If you use Typescript, typings are included automatically.
Usage
// A basic, cross-browser, polyfilled, DPI-aware canvas; // Same as the above, but with animation powers;; // It's also the default // Want a react component? No problem!; // There's also a nice collection of utilities, via:;
AnimatedCanvas
This is probably the class you want to use. It has a few API extensions
on top of the stock Canvas
you're used to. Details forthcoming, but for
now, take a gander:
Groups
let ac = renderer; { // By putting drawing into a group, those draw calls will only happen // if this canvas is render()d with that group specified. c; // There's a special 'default' group that's always drawn. You can // group rendering under it explicitly... c; // ... or just draw like you normally would, and let it group implicitly. cfillStyle = 'blue'; c;} // Draws using the specified groupsac;
Regions
This is like a lame version of the hopefully-soon-to-be-implemented "Hit Region" family of APIs for canvas.
let ac = renderer; { // You declare a named region like so c; // Regions are aware of the current transform c; c; c; // So in screen space, region 'b' is from (50, 50) to (250, 250)} // So once you render...ac; // You can then get back the regions you defined, in screen coordinatesacregions; // And conveniently perform hit tests (say, with a mouse cursor...)let regions = ac; // ['a', 'b'] // This can be used to great effect when combined with the groups// functionality to conditionally render components.;
React
If you're using <CanvasComponent>
you get a convenient event handler
that will be called any time the mouse cursor moves within the canvas.
The regions will have been calculated for you as well, and passed through
to your handler, free of charge!
import CanvasComponent from 'canviz'; { // ...}<CanvasComponent = />
Animation
NYI. Soon.