canvas-testbed
v1.0.4
Published
A minimal testbed for simple canvas demos
Downloads
115
Maintainers
Readme
canvas testbed
deprecation warning
This module is bloated and a little too magical. Instead, some of the following are recommended:
For visual apps, this is a simple module to get your demos and prototypes up and running. Ideal for use with Beefy. When the DOM content is ready, it does the following:
- Clear the body margins to zero
- Set the body overflow to hidden
- Adds a canvas element to the body (tag ID: 'canvas')
- Listen for window resizes and set the canvas to the new size
- Provides a minimal render loop that also gives you delta time
It also includes a requestAnimationFrame polyfill
api
testbed( [onRender], [onStart], [options] )
testbed( [onRender], [options] )
Example:
var test = require('canvas-testbed');
//called every frame
function render(context, width, height) {
context.clearRect(0, 0, width, height);
context.fillRect(250, 150, 200, 100);
}
//setup the testbed
test(render, {
once: true
});
See the demo
folder for a couple other examples.
All parameters are optional. Without a render
function the requestAnimationFrame will not be fired.
options
More may be added later, like unified touch/mouse handling for simple interactive demos, or simple scaling for retina screens. For now:
context
a string, "2d" or "webgl"contextAttributes
the attributes to be passed when creating the contextonce
only fire the render frame once, and then again when the window is resized (to avoid the canvas clearing completely)ignoreResize
to ignore resize events; by default this is false, and the canvas is scaled to the window sizeonResize
a callback for after the canvas has been resized; will not be called if the resize event is ignoredwidth
,height
to specifiy an explicit width or height of the canvas. if either is specified, the resize events will be ignored.
You can also pass any of the options of canvas-app, which this module builds on.
testing with beefy
First install beefy:
npm i beefy -g
Then run the demo:
beefy demo/demo-2d.js --live
And open up localhost:9966
in your browser.