can-draw

Can-draw

With can-draw, you CAN DRAW canvas more conveniently.

How to use

• Use a umd bundle

<div id="container"></div>
<!-- cdn -->
<script src="https://unpkg.com/can-draw@0.1.1-1/dist/umd/can-draw.min.js"></script>
<!-- compile and build a local bundle -->
<script src="yourLocalPath/can-draw.min.js"></script>
<script>
  var canDraw = new CanDraw({
    container: document.getElementById('container'),
    width: 400,
    height: 400
  });
  // ...
</script>

• Use with npm

  • Install

  npm i can-draw --save
  

  • Import

   // es module
   import CanDraw from 'can-draw';
   // commonjs
   var CanDraw = require('can-draw');
  

Quick Start

<div id="container"></div>

// init `can-draw` area
var canDraw = new CanDraw({
  container: document.getElementById('container'),
  // if width/height is not given, CanDraw will 
  // get the width/height of container by default
  width: 100,
  height: 100
});
// create a shape instance, you can add different shapes to it
var shape = new CanDraw.Shape();

// a dashed circle
const circle = new CanDraw.Circle({
  x: 0,
  y: 0,
  angle: 360,
  radius: 10,
  strokeWidth: 2,
  stroke: '#0A6AEF',
  dash: [1, 2],
});

// clear `can-draw` area
canDraw.clear();
// add circle to shape instance
shape.add(circle);
// add shape instance to canDraw instance
// and draw circle
canDraw.add(shape);