javascript - Easeljs draw different kinds of arrows -

this application made easeljs, work in html5 canvas.

i want able draw different kinds of arrows on board. tried inserting arrows images , making them draggable , resizable, made these images pretty ugly.

to illustrate:

field draw on

arrows draw on field

the functionality should follows:

• click on button
• draw line
• at mouseup event: convert line corresponding arrow
• arrow should draggable , resizable

how result?

you can draw arrows using graphics api. spent 20 mins making demo:

• http://jsfiddle.net/lannymcnie/ukjb1g2g/2/
• http://jsfiddle.net/lannymcnie/ukjb1g2g/3/

code:

var w = startx - endx; var h = starty - endy; var linelength = math.sqrt(w*w+h*h);  arrow.graphics.clear().setstrokestyle(3).beginstroke("#000").moveto(0,0); // logic draw end. straight line arrow.lineto(linelength-arrowheadsize, 0);  arrow.graphics.beginfill("#000"); arrow.graphics.drawpolystar(linelength, 0, arrowheadsize, 3);  // rotate arrow.rotation = math.atan2(h, w) * 180/math.pi; 

drawing straight , rotating easiest way add effects line. demo posted draws sort of sine-wave 1 of examples. there more magic in there make right length, etc.