CODEWITHSUNDEEP
htmlcanvastouchdrawshapes
Wardenclyffe
Wardenclyffe

Reputation: 2541

How to TOUCH DRAW Shapes on the HTML5 Canvas

I have a question...

I'm trying to figure out how to touch draw shapes on an HTML5 canvas. I've been searching everywhere and so far it's been impossible to find any descent tutorial on matter. Can somebody please help me out? I know how to "draw" shapes on the canvas (with code), but how do you draw/paint with (touch) your finger for mobile apps?

Here's my code so far...

Javascript:

        // draws a Square to the x and y coordinates of the mouse event inside
  // the specified element using the specified context
  function drawSquare(mouseEvent, sigCanvas, context) {

     var position = getPosition(mouseEvent, sigCanvas);

     context.strokeStyle = "color";
     context.strokeRect(x,y,width,height);
  }

  // draws a square from the last coordiantes in the path to the finishing
  // coordinates and unbind any event handlers which need to be preceded
  // by the mouse down event
  function finishDrawing(mouseEvent, sigCanvas, context) {
     // draw the line to the finishing coordinates
     drawSquare(mouseEvent, sigCanvas, context);

     context.closePath();

     // unbind any events which could draw
     $(sigCanvas).unbind("mousemove")
                 .unbind("mouseup")
                 .unbind("mouseout");
  }

HTML5:

    <div id="squareButton">  
    <p><button onclick="drawSquare();">Square</button></p>
</div>

Thanks a lot, Wardenclyffe

Upvotes: 0

Views: 2431

Answers (1)

rroche
rroche

Reputation: 1272

Not really a tutorial, but MDN has a solution here https://developer.mozilla.org/en/DOM/Touch_events#Drawing_as_the_touches_move

additionally you might want to look into the touch events ( also available on the same link above )

here is an excerpt from the link I provided

function startup() {
    var el = document.getElementsByTagName("canvas")[0];
    el.addEventListener("touchstart", handleStart, false);
    el.addEventListener("touchend", handleEnd, false);
    el.addEventListener("touchcancel", handleCancel, false);
    el.addEventListener("touchleave", handleEnd, false);
    el.addEventListener("touchmove", handleMove, false);
}

Upvotes: 2

Related Questions