javascript library for free form drawing

Question

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

Related: [How do I hand draw on canvas?](http://stackoverflow.com/q/22891827/562769) — Martin Thoma, Oct 08 '14 at 12:26

score 10 · Answer 1 · edited Oct 05 '11 at 20:22

10

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.

edited Oct 05 '11 at 20:22

µBio

10,668
6
38
56

answered Jul 21 '11 at 06:26

Ghostoy

2,689
19
18

The OP wants to actually draw on the page using a pencil, for example, not an image. – Bojangles Jul 21 '11 at 21:56

score 4 · Answer 2 · answered Apr 03 '14 at 15:24

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

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

score 4 · Accepted Answer · edited Jul 21 '11 at 21:54

4

You should look at ProcessingJS.

edited Jul 21 '11 at 21:54

Matthew

15,464
2
37
31

answered Jul 21 '11 at 03:27

pradeek

21,445
2
31
32

does that let me draw dynamically using my mouse? or I need to have pre-defined shapes and it just loads it? – ed1t Jul 21 '11 at 03:30

javascript library for free form drawing

3 Answers3

Code:

Linked