c2d2

c2d2 (See 2D Too) is a light-weight wrapper for HTML5 Canvas, providing jQuery-style chaining in a light package.

See http://brettz9.github.com/C2D2/ for examples and further details.

Installation

npm install c2d2

Usage (browser)

ES6 Modules:

<script type="module">
// eslint-disable-next-line import/no-unresolved -- Ok
import c2d2 from './node_modules/c2d2/dist/c2d2-browser-es.js';

c2d2([1000, 450]).$shadow({color: 'green', blur: 2, offset: [5, 10]}).
  $line({color: 'red', width: 5, xy: [[75, 50], [100, 75], [100, 25]]}).
  $fill({color: 'blue', xy: [[175, 150], [200, 175], [200, 125]]});

</script>

For older browsers:

<!--[if lte IE 8]><script src="explorercanvas/excanvas.js"></script><![endif]-->
<script src="node_modules/core-js-bundle/minified.js"></script>
<script src="node_modules/c2d2/dist/c2d2-browser.js"></script>

// Available as a global
c2d2([1000, 450]).
  $shadow({color: 'green', blur: 2, offset: [5, 10]}).
  $line({color: 'red', width: 5, xy: [[75, 50], [100, 75], [100, 25]]}).
  $fill({color: 'blue', xy: [[175, 150], [200, 175], [200, 125]]});

Usage (Node)

const c2d2 = require('c2d2');

To-dos

1. Add tests
2. Document API
3. Pass in G_vmlCanvasManager to avoid assuming global (if even needed anymore)?