How to TOUCH DRAW Shapes on the HTML5 Canvas - html

Question

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

Answer 1

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);
}