i had a problem on confusing how to put ontouch inside my coding because i want it function on ipad, below is my code
<script language="javascript">
function sig1()
{
if(sig == null)
{
xclear('myCanvas');
}
}
code for clear the line in canvas
<body id="main_body" class="no_guidelines" onload="sig1()" onmouseup="bodyonmouseup">
to let the canvas had fillstyle color and function
<canvas border=1 id="myCanvas" height=200 width=400 onmousedown="onmousedown()" onmouseup="onmouseup()" onmousemove="onmousemove()">Your browser does not support the application</canvas>
canvas that can draw line like signature
var sig = null;
var ele;
function bodyonmouseup(e)
{
var ele;
ele = document.getElementById('myCanvas');
ele.isDown = false;
}
function onmousedown(e)
{
var ele,p;
if (!e) e = window.event;
ele = (e.srcElement);
if (! ele) ele = e.target;
ele.isDown = true;
ele.context = ele.getContext("2d");
ele.context.lineWidth = 1;
ele.context.beginPath();
ele.context.moveTo(e.offsetX,e.offsetY);
sig.line = new Array();
p = new Object();
p.x = e.offsetX;
p.y = e.offsetY;
sig.p = p;
sig.line[sig.line.length] = p;
sig.lines[sig.lines.length] = sig.line;
}
function onmousemove(e)
{
var ele,dx,dy,p;
if (!e) e = window.event;
ele = (e.srcElement);
if (! ele) ele = e.target;
if (! ele.isDown) return;
ele.context.lineTo(e.offsetX,e.offsetY);
ele.context.stroke();
dx = e.offsetX - sig.p.x;
dy = e.offsetY - sig.p.y;
if (dx == 0 && dy == 0) return;
sig.p = new Object();
sig.p.x = e.offsetX;
sig.p.y = e.offsetY;
sig.line[sig.line.length] = sig.p;
}
So i want to know if i want keep both onMouse and ontouch, how i put the ontouch so that the canvas can be draw on ipad?? please help, it is urgent
Use this js. Your finger will be your mouse. They are converting all touch events to mouse events.
jquery-ui-touch-punch