html5 - Skew a line on canvas using JavaScript -


i drawing lines on canvas. user can select particular line , able skew line. skew, mean can drag 1 end point of line desired point on same x-axis. how can using javascript , html5 canvas?

the general way draw line this:

ctx.moveto(line.startx, line.starty); ctx.lineto(line.endx, line.endy); ctx.stroke(); 

and can add eventlisteners , check see if mouse near line...

window.addeventlistener("mousemove", function(e) {     mouse.x = e.layerx || e.offsetx;     mouse.y = e.layery || e.offsety;     // check see if mouse near line(s) here...     // can change x/y , start/end     // example:     if (mouse.x <= line.startx + 5 || mouse.x >= line.startx - 5)     {         // mouse within 5px of first x     } }); 

Comments

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

c# - Get rid of xmlns attribute when adding node to existing xml -