Scribby is a JavaScript library that allows users to draw simple “scribbles” on a web page. To create a drawing application, developers can also draw seamless vector-based graphics in XML format using SVG.

Components Elements

The main functionality is in scribby.js, which deals with withdrawing on the Dom SVG element. Notey.js which presents a simple sticky note-like object on a webpage is also included as an example application using scribby.js. The utility functions are found in draggy.js and resty.js (but these are only required for the Notes app).

Objectives

• SVG-based smooth/natural graphic
• Simple/intuitive interface (nonexistent)
• json representation
• Convenience-based (experimental) local storage and persistence
• Lightweight, no dependencies

How to make use of it:

1. Download and insert scribby.js JavaScript into the document.

<script src="./lib/scribby.js"></script>

2. Create an SVG element for the drawing application.

<svg id="svgElement" style="background-color: #EFF;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="400" />

3. Configure the library on an SVG element to create a basic drawing application.

var board = new Scribby(document.getElementById("svgElement"));

4. It also provides a Notey method that allows you to create Sticky Note with an SVG drawing functionality on the page.

<script src="./lib/draggy.js"></script>
<script src="./lib/notey.js"></script>
<script src="./lib/resty.js"></script>

var stickyNote = new Notey();
stickyNote.attachToBody();
stickyNote.save();

5. Undo/Reset/Reset the drawing application.

board.undo();
board.redo();
board.reset();

6. Set the properties of the SVG stroke border:

board.setAttrStroke('red');
board.setAttrStrokeWidth(3);

7. Export the SVG file as JSON data.

var data = board.toJson();

8. Create a new drawing app from the JSON data you provide.

var board2 = new Scribby(svgEl2, data);

SVG Based Drawing Board, scribby Plugin/Github

See Demo And Download

Official Website(naknomum): Click Here

This superior jQuery/javascript plugin is developed by naknomum. For extra Advanced Usages, please go to the official website.