Drawing interactively onto a <div>

Question

I am building a web application in which the user would be able to draw zones (polygons) onto a video. A solution I already implemented was to put a <div> on top of the video player, catching the mouse clicks.

What I'm willing to do right now, is being able to draw on that <div> with the mouse:

• Click on the block to draw a point
• A button, Draw zone, which would fill a polygon with the existing points
• A button, Delete canvas, which would reset the block

I am looking for directions about which library to use. Already heard about:

• Raphael (raphaeljs.com/#demo)
• jsDraw2D (jsdraw2d.jsfiction.com/demo/linepolygon.htm)

---

Problem

Raphael looks monstruous but kinda overkill for what I want to do. And on the contrary, jsDraw2D seems to work just fine from what I tested (only drawed manually though).

I have several constraints such as:

• The user is drawing the points with the mouse (by clicking)
• The user is drawing on a <div> with opacity on (the filled polygon should be transparent too)
• I need to store the points' coordinates (or of the polygon at least)

---

Question

What should I use ? Should I stick to Raphael even though it's a bit difficult to implement (I've basically no background in JavaScript) ? Or do you know of a JavaScript library which could do what jsDraw2D does but in better ?

Thanks,

Answer 1

You should use SVG because they are obviously more interactive and easy to implement. If you've ever used Khanacademy then probably you'll come to know that they use SVG in their scratchpad.

Moreover, SVGs are also w3c recommended like canvas.

Answer 2

If you are able to go for HTML5 Canvas could be a good choice.