Mobile-friendly Sketch Pad With jQuery And Canvas - Sketchpad.js

A simple and touch-enabled jQuery drawing plugin that allows you to create a sketch pad where you can draw and paint in the browser using mouse and touch gestures.

Built with jQuery library and HTML5 canvas. Feel free to download and use it in your next project to provide a smooth drawing experience with touch support.

More features:

• Redo
• Undo
• Animate sketchpad strokes
• Custom stroke color & size
• Export as JSON or JavaScript objects.

How to use it:

1. Install & download.

# NPM
$ npm i sketchpad

2. Import the Sketchpad library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/scripts/sketchpad.js"></script>

// OR
import Sketchpad from './lib/sketchpad.js';

3. Create an HTML canvas element for the sketchpad.

<canvas id="example">
  
</canvas>

4. Initialize the sketchpad.

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

5. Customize the stroke color & size.

// hex color
sketchpad.color = '#000000';

// in pixels
sketchpad.penSize = 10;

6. Animate the strokes at a given speed.

sketchpad.animate(10);

7. Undo & redo.

sketchpad.undo();
sketchpad.redo();

8. Export strokes as JSON or JavaScript objects.

sketchpad.toJSON();
sketchpad.toObject();

9. Import strokes from JSON or JavaScript objects.

var myData = sketchpad.toObject();
myData.element = '#sketchpad2'
var sketchpad2 = new Sketchpad(settings);

---

This awesome jQuery plugin is developed by yiom. For more Advanced Usages, please check the demo page or visit the official website.