Raphael SketchPad

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

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>

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>

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

container Raphael or string
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

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

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

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

fn function

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

Animate!

animate

Animates the strokes in the widget.

Parameters

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

<div id="editor" class="widget" style="height:260px;"></div>
<input type="hidden" id="data2" name="data2" />

<div class="clear widget_actions span-2">
  <div class="_title">Color</div>
  <div id="editor_black" class="selected">Black</div>
  <div id="editor_red">Red</div>
</div>
<div class="widget_actions span-2">
  <div class="_title">Width</div>
  <div id="editor_thin" class="selected">Thin</div>
  <div id="editor_thick">Thick</div>
</div>
<div class="widget_actions span-2">
  <div class="_title">Opacity</div>
  <div id="editor_solid" class="selected">Solid</div>
  <div id="editor_fuzzy">Fuzzy</div>
</div>
<div class="widget_actions span-2 last">
  <div id="editor_undo" class="disabled">Undo</div>
  <div id="editor_redo" class="disabled">Redo</div>
  <div id="editor_clear" class="disabled">Clear</div>
</div>
<div class="clear"></div>
<div class="widget_actions span-4">
  <div id="editor_draw_erase">Draw</div>
</div>
<div class="widget_actions span-4 last">
  <div id="editor_animate">Animate!</div>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    var sketchpad = Raphael.sketchpad("editor", {
      height: 260,
      width: 260,
      editing: true // true is default
    });

    // When the sketchpad changes, update the input field.
    sketchpad.change(function() {
      $("#data2").val(sketchpad.json());
    });

    sketchpad.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"
    }]);

    function enable(element, enable) {
      if (enable) {
        $(element).removeClass("disabled");
      } else {
        $(element).addClass("disabled");
      }
    };

    function select(element1, element2) {
      $(element1).addClass("selected");
      $(element2).removeClass("selected");
    }

    $("#editor_undo").click(function() {
      sketchpad.undo();
    });
    $("#editor_redo").click(function() {
      sketchpad.redo();
    });
    $("#editor_clear").click(function() {
      sketchpad.clear();
    });
    $("#editor_animate").click(function() {
      sketchpad.animate();
    });

    $("#editor_thin").click(function() {
      select("#editor_thin", "#editor_thick");
      sketchpad.pen().width(5);
    });
    $("#editor_thick").click(function() {
      select("#editor_thick", "#editor_thin");
      sketchpad.pen().width(15);
    });
    $("#editor_solid").click(function() {
      select("#editor_solid", "#editor_fuzzy");
      sketchpad.pen().opacity(1);
    });
    $("#editor_fuzzy").click(function() {
      select("#editor_fuzzy", "#editor_solid");
      sketchpad.pen().opacity(0.3);
    });
    $("#editor_black").click(function() {
      select("#editor_black", "#editor_red");
      sketchpad.pen().color("#000");
    });
    $("#editor_red").click(function() {
      select("#editor_red", "#editor_black");
      sketchpad.pen().color("#f00");
    });
    $("#editor_draw_erase").toggle(function() {
      $(this).text("Erase");
      sketchpad.editing("erase");
    }, function() {
      $(this).text("Draw");
      sketchpad.editing(true);
    });

    function update_actions() {
      enable("#editor_undo", sketchpad.undoable());
      enable("#editor_redo", sketchpad.redoable());
      enable("#editor_clear", sketchpad.strokes().length > 0);
    }

    sketchpad.change(update_actions);

    update_actions();
  });
</script>