View on GitHub

Sketchpad

A simple sketchpad library.

Download this project as a .zip file Download this project as a tar.gz file

Installing

To install it via bower, simply run:

$ bower install sketchpad

Getting Stated

You just need a canvas

<canvas class="sketchpad" id="sketchpad"><canvas>

And you should be able to instantiate a sketchpad by coding:

var sketchpad = new Sketchpad({
  element: '#sketchpad',
  width: 400,
  height: 400
});

The code above would reproduce:

Our API also provides some useful functionalities:

Undo

sketchpad.undo()

Redo

sketchpad.redo()

Change stroke color

sketchpad.color = '#FFF'

Change stroke size

sketchpad.penSize = 10

Playback each sketchpad stroke (10ms delay between each line piece)

sketchpad.animate(10)

Recover sketchpad JSON or Object Settings

sketchpad.toJSON()
sketchpad.toObject()

By recovering the sketchpad JSON or Object you can then clone the sketchpad by coding:

var settings = sketchpad.toObject()
settings.element = '#other-sketchpad'
var otherSketchpad = new Sketchpad(settings)