Shutter.js

A JavaScript library for providing advanced features in an HTML5 Canvas.

Getting Started

To get started, use one of the package managers below and get a scene setup.

npm

npm i shutterjs

Self hosted

You can also host a copy of Shutter.js right on your own website.

Example

var renderer = new Shutter.CanvasRenderer(null, { autoResize: true });
var scene = new Shutter.Scene();
var camera = new Shutter.Camera();

var line = new Shutter.QuadraticLine();
line.add(0, 0);
for (var x = 10; x < 100; x += 10) {
    line.add(x, Math.floor(Math.random() * -20) + 10);
}
scene.add(line);

document.body.appendChild(renderer.canvas);

function render() {
    renderer.render(scene, camera);

    requestAnimationFrame(render);
}

render();

window.addEventListener('load', onLoad);

Documentation & Examples

https://passthemayo.github.io/Shutter/

Building

After editing files, you can simply run npm run build to compile the files into a packaged format under dist. You can also perform tests in the test folder, or create more files to test more features. If you do a PR, make sure not to build the documentation because I will not accept it.

Frequently Asked Questions

Is there frustum culling?

No, and there likely won't be for a while until we can find an efficient way to check if an object is in the rendering area. If you have any ideas or are willing to contribute, open a PR/issue.

Contributors

Just me right now, I'll throw your name in here if you help out.

Contact

You can find me on Discord using PassTheMayo#8620.