Teledraw Canvas

Teledraw Canvas is an HTML5 Canvas drawing engine that is used in Teledraw.com. It is currently dependent on Underscore.js (1.x.x).

You can see a very basic live demo here.

How to use

Include teledraw-canvas.js in your page, and from there it's as simple as creating a canvas element with whatever width and height you want:

<canvas id="test-canvas" width="512" height="512"></canvas>

and initializing the TeledrawCanvas:

var canvas = new TeledrawCanvas('test-canvas');

// with options
var canvas = new TeledrawCanvas('test-canvas', {
    width: 512,
    height: 512,
    fullWidth: 1024,
    fullHeight: 1024,

    maxHistory: 20,
    minStrokeSize: 500,
    maxStrokeSize: 10000,
    minStrokeSoftness: 0,
    maxStrokeSoftness: 100,

    enableZoom: true, // true by default
    maxZoom: 8 // 800%
});

API

Setting tool color

Teledraw Canvas will accept any color string that works with CSS, as well as an array of RGB(A) values 0 to 255 (A: 0-1), (e.g. [255, 0, 0, 1.0] would be a fully opaque red).

// by hex value
canvas.setColor('#ec823f');
// or
canvas.setColor('#fc0');

// by rgb
canvas.setColor('rgb(255, 0, 0)');

// by hsla
canvas.setColor('hsla(240, 100%, 50%, 0.5)');

// by common color name
canvas.setColor('lightGoldenrodYellow');

// by RGBA array
canvas.setColor([255, 0, 0, 0.5]);

// and so on...

Picking a tool

Currently, the tools available are 'pencil', 'arrow', 'line-arrow', 'eraser', 'fill', 'rectangle', 'line', 'ellipse', 'eyedropper' and (if zoom is enabled) 'grab'. You can select them with setTool.

// pencil
canvas.setTool('pencil');

// eraser
canvas.setTool('eraser');

// etc

Adjusting the stroke style

You can modify how the stroke looks, including opacity, size and softness.

// relatively small stroke
canvas.setStrokeSize(1000);
// relatively large stroke
canvas.setStrokeSize(10000);

// no softness
canvas.setStrokeSoftness(0);
// super blurry
canvas.setStrokeSoftness(100);

// fully opaque
canvas.setAlpha(1);
// fully transparent
canvas.setAlpha(0);