by Ian Li

Raphael SketchPad

Raphael Sketchpad is a simple drawing editor that you can easily include with your forms.
It is similar to Mai'Nada.net's InputDraw, but does not require Flash.
It is built on top of the Raphael Javascript vector graphics library.

Raphael Sketchpad requires these Javascript libraries: Raphael 2.0.1, jQuery, and JSON.stringify.

How It Works

Editor

Draw a sketch below.

Result

The sketch is stored as JSON in an input field.

Viewer

Click to display the JSON data in the viewer.


How to Use It

  1. Include necessary javascript library files.
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="raphael.min.js"></script>
<script type="text/javascript" src="json2.min.js"></script>
<script type="text/javascript" src="raphael.sketchpad.js"></script>
  1. To create an editor, put a div with an id where you want the editor. Add a form with a hidden input field with a different id. Set the editing option to true (This is the default setting).
<div id="editor"></div>

<form action="save.php" method="post">
	<input type="hidden" name="data" />
	<input type="submit" value="Save" />
</form>

<script type="text/javascript">
	var sketchpad = Raphael.sketchpad("editor", {
		width: 400,
		height: 400,
		editing: true
	});

	// When the sketchpad changes, update the input field.
	sketchpad.change(function() {
		$("#data").val(sketchpad.json());
	});
</script>
  1. To create a viewer, put a div with an id where you want the viewer. Set strokes with an array of strokes. Set the editing option to false.
<div id="viewer"></div>

<script type="text/javascript">
	var strokes = [{
		type:"path",
		path:[["M",10,10],["L",390,390]],
		fill:"none", "stroke":"#000000",
		stroke-opacity:1,
		stroke-width:5,
		stroke-linecap:"round",
		stroke-linejoin:"round"
	}];
	var sketchpad = Raphael.sketchpad("viewer", {
		width: 400,
		height: 400,
		strokes: strokes,
		editing: false
	});
</script>

Reference

Raphael.sketchpad

Creates a Raphael SketchPad widget.

Parameters

  1. container Raphael or string
  2. options object

Possible options attributes

  • width number (100)
  • height number (100)
  • input string (null)
  • strokes array (empty array)
  • update_input boolean (false)
// Each of the examples creates a widget that is 100px wide and 100px high.

// Creates an editor at the top left corner of the #editor element.
// The editor is initialized with strokes from the #data form field.
// Sketches are stored in the #data form field.
var editor = Raphael.sketchpad("editor", {
	width: 100,
	height: 100,
	input: "#data"
});

// Creates a viewer at the top left corner of the #viewer element
// initialized with the stroke data.
var viewer = Raphael.sketchpad("viewer", {
	width: 100,
	height: 100,
	strokes: [{
		type:"path",
		path:[["M",10,10],["L",90,90]],
		fill:"none", "stroke":"#000000",
		stroke-opacity:1,
		stroke-width:5,
		stroke-linecap:"round",
		stroke-linejoin:"round"
	}]
});

paper

Returns the Raphael paper object.

// http://raphaeljs.com describes properties of the Raphael paper object.
var paper = editor.paper();

container

Returns the HTML element containing the Raphael paper object.

// The container is a regular HTML element.
var container = editor.container();

pen

Returns the pen associated with the widget.

// The pen has various properties that you can set.
var pen = editor.pen();

strokes

Sets the strokes in the widget. If the json parameter is not provided, returns an array of strokes.

Parameters

  1. strokes array
// The viewer shows a black diagonal path.
// path parameter can be array or SVG path format, e.g., "M10,10L90,90".
viewer.strokes([{
	"type":"path",
	"path":[["M",10,10],["L",90,90]],
	"fill":"none",
	"stroke":"#000000",
	"stroke-opacity":1,
	"stroke-width":5,
	"stroke-linecap":"round",
	"stroke-linejoin":"round"
}]);

// Returns an array of strokes.
var strokes = viewer.strokes();

json

Sets the strokes in the widget. If the json parameter is not provided, returns a JSON representation of the strokes.

Parameters

  1. json string
// The viewer shows a black diagonal path.
// path parameter can be array or SVG path format, e.g., "M10,10L90,90".
viewer.json('[{' +
	'"type":"path",' +
	'"path":[["M",10,10],["L",90,90]],' +
	'"fill":"none", "stroke":"#000000",' +
	'"stroke-opacity":1,' +
	'"stroke-width":5,' +
	'"stroke-linecap":"round",' +
	'"stroke-linejoin":"round"' +
	'}]'
);

// Returns the JSON representation of the strokes.
var json = viewer.json();

editing

Sets the editing mode of the sketchpad. The sketchpad has to be initialized as an editor. There are three modes:

  • true - drawing mode
  • false - viewer mode
  • erase - erase mode

Parameters

  1. mode string or boolean
// When the sketchpad is in drawing mode.
editor.editing(true);

// When the sketchpad is in viewer mode.
editor.editing(false);

// When the sketchpad is in erase mode.
editor.editing("erase");

Draw something here.

change

Sets the function that handles the change event. onchange events happen when

Parameters

  1. fn function
// When the sketch changes, an alert shows up.
editor.change(function() {
	alert("Yay!");
});
Animate!

animate

Animates the strokes in the widget.

Parameters

  1. ms number
// Animates with 1 second (1000 ms) delay between frames.
viewer.animate(1000);

// If no parameter is provided, delay is 500 ms (default).
viewer.animate();

Editing Actions and Pen Properties

Color
Black
Red
Width
Thin
Thick
Opacity
Solid
Fuzzy
Undo
Redo
Clear
Draw
Animate!

Editing Actions

The editor supports various editing actions.

clear

// Clear the editor.
editor.clear();

undo

// Undo the last stroke.
editor.undo();

undoable

// True if can undo.
editor.undoable();

redo

// Redo the undone stroke.
editor.redo();

redoable

// True if can redo.
editor.redoable();

Pen Properties

The pen has various properties that you can set.

color

// #ff0000 or #f00
pen.color("#ff0000");

width

// min = 1, max = 1000
pen.width(10);

opacity

// min = 0, max = 1.0
pen.opacity(10);
Show source

© 2014 Raphael SketchPad by Ian Li. Licensed under the MIT license.