Top 5: Best sketchpads and manually drawing on canvas javascript and jQuery plugins

From customized signature pads to our personal web version of MsPaint, these libraries are a good start if you want to enter in the awesome canvas world. The top has been made according to the difficulty of implementation and how friendly is the API with the developer (including dependencies).

5. wPaint

Github | Demo

wPaint is a jQuery paint plugin for a simple drawing surface that you can easily pop into your pages, similar to the basic windows paint program. This plugin requires jQuery UI.

4. Sketchpad

Github | Demo

Sketchpad is a simple sketchpad project, the API provides a variety of functionalities as undo and redo manager and stroke size. You can even animate the drawn path.

3. Sketch.js

Github | Demo

Sketch.js is an easy-to-use jQuery plugin that allows you to create canvases upon which visitors can draw. The code is partially inspired by William Malone's drawing app tutorial as well as CanvasPaint.

2. Responsive Sketchpad

Github | Demo

Responsive Sketchpad A completely responsive, HTML5 canvas sketchpad for use on desktop and mobile browsers. You can draw at any size on the canvas, then you can give dynamic dimensions using javascript and the strokes will be resized too.

1. Atrament.js

Github | Demo

Atrament.js is a tiny JS library for beautiful drawing and handwriting on the HTML Canvas, it enables the user to draw smooth, natural drawings and handwriting on the HTML canvas using a touchpad or the mouse.

Extra

Literally Canvas

Literally Canvas is an awesome HTML5 drawing widget, but React.js is a dependency. It supports undo and redo manager, zooming pane, selection, eraser, stroke size changer and many more features.

Painterro

Github

Painterro is JavaScript paint widget which allows editing images directly in a browser. It can be easily integrated into your website or blog by including only one js file and calling initialization code. With Painterro you can:

• Paste image from clipboard with Ctrl+V (e.g. PtnScr screenshot), drag and drop it into widget, or load with open dialog
• Crop image by defined area
• Paint primitives (alpha color can be used)
• Add text
• Rotate / resize (scale) image
• Pixelize some area to hide sensitive data

If you know another awesome sketch plugin, please share it with us in the comment box !