javascript - How to draw a touch straight line in HTML5 canvas -


i'm trying create drawing tool set ipad , far i've done square, i'm not sure how go coding straight line? here's code finished square, maybe it'll help. know how code straight line. after that, if wanted draw circles well? in code need change?

here's code:

javascript (square/rectangle)

// "draw rectangle" button function rect(){ var canvas = document.getelementbyid('canvassignature'), ctx = canvas.getcontext('2d'), rect = {}, drag = false;  function init() {   canvas.addeventlistener("touchstart", touchhandler, false);   canvas.addeventlistener("touchmove", touchhandler, false);   canvas.addeventlistener("touchend", touchhandler, false); }   function touchhandler(event) {   if (event.targettouches.length == 1) { //one finger touche     var touch = event.targettouches[0];      if (event.type == "touchstart") {       rect.startx = touch.pagex;       rect.starty = touch.pagey;       drag = true;     } else if (event.type == "touchmove") {       if (drag) {         rect.w = touch.pagex - rect.startx;         rect.h = touch.pagey - rect.starty ;         draw();       }     } else if (event.type == "touchend" || event.type == "touchcancel") {       drag = false;     }   } }  function draw() {   ctx.fillrect(rect.startx, rect.starty, rect.w, rect.h);     ctx.clearrect(0, 0, canvas.width, canvas.height);      ctx.fillstyle = "orange"; }  init(); } 

just substitute this:

ctx.fillrect(rect.startx, rect.starty, rect.w, rect.h);  ctx.clearrect(0, 0, canvas.width, canvas.height); 

with this:

ctx.fillline(rect.startx, rect.starty, rect.w, rect.h);  ctx.clearline(0, 0, canvas.width, canvas.height); 

this of course not 100% valid code, concept should work , you'll point


Comments

Popular posts from this blog

django - How can I change user group without delete record -

java - Need to add SOAP security token -

java - EclipseLink JPA Object is not a known entity type -