sketchable

$.fn. sketchable

Create a jQuery Sketchable instance. This is a jQuery wrapper for the jSketch drawing class.

Version:
  • 2.3
Author:
  • Luis A. Leiva
License:
  • MIT license
Source:

Example

$('canvas').sketchable();
$('canvas').sketchable({ interactive:false });

Namespaces

api
defaults
plugins

Methods

(static) clear(keepStrokesopt) → {object}

Clears canvas together with associated strokes data.

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

Preserve stroke data (default: false).
Returns:
Type:
object

jQuery

Example
var $canvas = $('canvas').sketchable();
// This will remove strokes data as well.
$canvas.clear();
// If you only need to clear the canvas, just do:
$canvas.clear(true);
// Or, alternatively:
$canvas.sketchable('handler', function(elem, data) {
  data.sketch.clear();
});

(static) config(optsopt) → {object}

Get/Set user configuration of an existing jQuery Sketchable element.

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

Configuration (default: $.fn.sketchable.defaults).
Returns:
Type:
object

jQuery

Example
var $canvas = $('canvas').sketchable('config', { interactive: false });
// Update later on:
$canvas.sketchable('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
// Read all the data associated to this instance.
var data = $('canvas').sketchable('data');
// Quick access to the Sketchable instance.
var inst = $('canvas').sketchable('data', 'instance');

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

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:
object

jQuery

Example
// Decorate 'clear' method with `myClearFn()`,
// using 'someId' to avoid collisions with other decorators.
$('canvas').sketchable('decorate', 'clear', myClearFn, 'someId');

(static) destroy() → {object}

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

Source:
Returns:
Type:
object

jQuery

Example
var $canvas = $('canvas').sketchable();
// This will leave the canvas element intact.
$canvas.sketchable('destroy');

(static) handler(callback) → {object}

Allow 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:
object

jQuery

Example
$('canvas').sketchable('handler', function(elem, data) {
  // do something with elem or data
});

(static) reset(optsopt) → {object}

Reinitialize a sketchable canvas with given configuration options.

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

Configuration (default: $.fn.sketchable.defaults).
Returns:
Type:
object

jQuery

Example
var $canvas = $('canvas').sketchable();
// Reset default state.
$canvas.sketchable('reset');
// Reset with custom configuration.
$canvas.sketchable('reset', { interactive:false });

(static) strokes(arropt) → {*}

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:
*

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

Example
// Getter: read associated strokes.
var strokes = $('canvas').sketchable('strokes');
// Setter: replace associated strokes.
$('canvas').sketchable('strokes', [ [arr1], ..., [arrN] ]);