canvas-testbed

    1.0.4 • Public • Published

    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 context
    • once 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 size
    • onResize a callback for after the canvas has been resized; will not be called if the resize event is ignored
    • width, 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.

    Install

    npm i canvas-testbed

    DownloadsWeekly Downloads

    6

    Version

    1.0.4

    License

    MIT

    Last publish

    Collaborators

    • mattdesl