Sketchable

Sketchable

new Sketchable(elem, optionsopt)

Initialize the plugin: make CANVAS elements drawable.
Contrary to the jQuery version, only one element can be passed in at a time.

Version:
  • 2.3
Author:
  • Luis A. Leiva
License:
  • MIT
Source:
See:
Parameters:
Name Type Attributes Description
elem object | string

DOM element or selector.
options object <optional>

Configuration (default: Sketchable#defaults).
Example
// Passing a DOM element:
var sketcher1 = new Sketchable(document.getElementById('foo'));
// Passing a selector:
var sketcher2 = new Sketchable('#foo');
// With custom configuration:
var sketcher2 = new Sketchable('#foo', { multitouch:false });

Namespaces

defaults
plugins

Methods

(static) clear(keepStrokesopt) → {Sketchable}

Clears canvas together with associated strokes data.

Source:
See:
Parameters:
Name Type Attributes Description
keepStrokes boolean <optional>

Preserve stroke data (default: false).
Returns:
Type:
Sketchable
Example
var sketcher = new Sketchable('#my-canvas');
// Warning: This will remove strokes data as well.
sketcher.clear();
// If you only need to clear the canvas, just do:
sketcher.clear(true);
// Or, alternatively:
sketcher.handler(function(elem, data) {
  data.sketch.clear();
});

(static) config(optsopt) → {Sketchable}

Get/Set user configuration of an existing Sketchable instance.

Source:
Parameters:
Name Type Attributes Description
opts object <optional>

Configuration (default: Sketchable#defaults).
Returns:
Type:
Sketchable
Example
var sketcher = new Sketchable('#my-canvas', { interactive: false });
// Update later on:
sketcher.config({ interactive: true });

(static) data(propertyopt) → {*}

Retrieve data associated to an existing Sketchable instance.

Source:
Parameters:
Name Type Attributes Description
property string <optional>

Top-level data property, e.g. "instance", "sketch", "options".
Returns:
Type:
*
Example
var sketcher = new Sketchable('#my-canvas', { interactive: false });
// Read all the data associated to this instance.
var data = sketcher.data();
// Quick access to Sketchable instance.
var inst = sketcher.data('instance');

(static) decorate(evName, listener, initiator) → {Sketchable}

Decorate event. Will execute default event first.

Source:
Parameters:
Name Type Description
evName string

Event name.
listener function

Custom event listener.
initiator string

Some identifier.
Returns:
Type:
Sketchable
Example
var sketcher = new Sketchable('#my-canvas');
// Decorate 'clear' method with `myClearFn()`,
// using 'someId' to avoid collisions with other decorators.
sketcher.decorate('clear', myClearFn, 'someId');

(static) destroy() → {Sketchable}

Destroys sketchable canvas, together with strokes data and associated events.

Source:
Returns:
Type:
Sketchable
Example
var sketcher = new Sketchable('#my-canvas');
// This will leave the canvas element intact.
sketcher.destroy();

(static) handler(callback) → {Sketchable}

Allows low-level manipulation of the sketchable canvas.

Source:
Parameters:
Name Type Description
callback function

Callback function, invoked with 2 arguments: elem (CANVAS element) and data (private element data).
Returns:
Type:
Sketchable
Example
var sketcher = new Sketchable('#my-canvas');
sketcher.handler(function(elem, data) {
  // do something with elem or data
});

(static) reset(optsopt) → {Sketchable}

Reinitializes a sketchable canvas with given configuration options.

Source:
Parameters:
Name Type Attributes Description
opts object <optional>

Configuration (default: Sketchable#defaults).
Returns:
Type:
Sketchable
Example
var sketcher = new Sketchable('#my-canvas');
// Reset default state.
sketcher.reset();
// Reset with custom configuration.
sketcher.reset({ interactive:false });

(static) strokes(arropt) → {array|Sketchable}

Get/Set drawing data strokes sequence.

Source:
Parameters:
Name Type Attributes Description
arr array <optional>

Multidimensional array of [x,y,time,status] tuples; status = 0 (pen down) or 1 (pen up).
Returns:
Type:
array | Sketchable

Strokes object on get, Sketchable instance on set (with the new data attached).

Example
var sketcher = new Sketchable('#my-canvas');
// Getter: read associated strokes.
var strokes = sketcher.strokes();
// Setter: replace associated strokes.
sketcher.strokes([ [arr1], ..., [arrN] ]);