Is there a javascript library which lets me draw on a web page and then save the state of that drawing?

I want to draw an 2D image using the mouse and then how to store and load that drawing

Is there a javascript library which lets me draw on a web page and then save the state of that drawing?

I want to draw an 2D image using the mouse and then how to store and load that drawing

• javascript
• html
• drawing

• Related: How do I hand draw on canvas? – Martin Thoma Commented Oct 8, 2014 at 12:26

3 Answers 3

Use HTML5 Canvas. A simple example for drawing images is here: http://jsfiddle.net/ghostoy/wTmFE/1/.

I recommend this online book: Dive Into HTML5.

You should look at ProcessingJS.

If you want the free drawing to work with touchscreens, I recommend Fabric.js:

• Demo
• Tutorial

Code:

<canvas id="c1" width="100" height="100" style="border:1px solid black;">
</canvas>

var canvas = new fabric.Canvas('c1');
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 5;
console.log(canvas);

See JSfiddle