# canvas-testbed

> A minimal testbed for simple canvas demos

Latest version **1.0.4** (published 2015-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install canvas-testbed
pnpm add canvas-testbed
yarn add canvas-testbed
bun add canvas-testbed
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2015-05-09 |
| First published | 2014-05-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Matt DesLauriers |
| Maintainers | mattdesl |
| Keywords | canvas, test, testbed, demo, beefy, prototype, prototyping, webgl |

## Links

- npm: https://www.npmjs.com/package/canvas-testbed
- Repository: https://github.com/mattdesl/canvas-testbed
- Issues: https://github.com/mattdesl/canvas-testbed/issues
- npm.io page: https://npm.io/package/canvas-testbed

## Dependencies (3)

- [raf.js](https://npm.io/package/raf.js.md) ~0.0.4
- [domready](https://npm.io/package/domready.md) ~1.0.5
- [canvas-app](https://npm.io/package/canvas-app.md) ^2.4.0

## Alternatives

- [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads
- [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads
- [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads
- [aws-elasticsearch-connector](https://npm.io/package/aws-elasticsearch-connector.md) — 37.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2015-05-09
- 1.0.3 — 2014-11-15
- 1.0.2 — 2014-10-15
- 1.0.1 — 2014-10-01
- 1.0.0 — 2014-09-27
- 0.4.0 — 2014-07-06
- 0.3.0 — 2014-07-04
- 0.2.0 — 2014-06-07
- 0.1.1 — 2014-05-20
- 0.1.0 — 2014-05-20
- 0.0.3 — 2014-05-16
- 0.0.2 — 2014-05-03
- 0.0.1 — 2014-05-03
- 0.0.0 — 2014-05-03

## README

# canvas testbed

#### deprecation warning

This module is bloated and a little too magical. Instead, some of the following are recommended:

- [canvas-fit-loop](https://www.npmjs.com/package/canvas-fit-loop)
- [2d-context](https://www.npmjs.com/package/2d-context)
- [webgl-context](https://www.npmjs.com/package/webgl-context)

---

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](https://www.npmjs.org/package/domready), 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](https://www.npmjs.org/package/raf.js)

# api


```js
testbed( [onRender], [onStart], [options] )
testbed( [onRender], [options] )
```

Example:
```js
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](https://www.npmjs.org/package/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.

---
_Source: https://npm.io/package/canvas-testbed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._