How to create E-sign functionality for browser and mobile version using Onsen UI Javasript? I made a e-sign functionality which worked in browser version but when I try to use it mobile version it didn't work. How to solve this problem?

[souvikdey1996]

//Onsen ui design coding
<ons-list-item>
<ons-row>
Date    <u id=“curDate”></u>
</ons-row>
<ons-row>
<ons-col>Signature</ons-col>
<ons-col style=“text-align:right;”><ons-button class=“button button–material” style=“width:100px;” onclick=“erase()”>clear</ons-button></ons-col>
</ons-row>
<ons-row style=“background-color: white;”>
<ons-col>
<!–<u><img src=“sigimg.png” alt=“Sig IMG” style=“width: 100%”></u>–>
<canvas id=“can” width=“350” height=“200” style=“border:2px solid black;”>
</canvas>
</ons-col>
</ons-row>
</ons-list-item>
//Javascript coding
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
xval = 0,
yval = 0,
dot_flag = false;

var x = “black”,
y = 2;

function init(xv, yv) {
//debugger;
xval = xv;
yval = yv;
canvas = document.getElementById(‘can’);
ctx = canvas.getContext(“2d”);
w = canvas.width;
h = canvas.height;

canvas.addEventListener("mousemove", function(e) {
    findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function(e) {
    findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function(e) {
    findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function(e) {
    findxy('out', e)
}, false);

}

function color(obj) {
switch (obj.id) {
case “green”:
x = “green”;
break;
case “blue”:
x = “blue”;
break;
case “red”:
x = “red”;
break;
case “yellow”:
x = “yellow”;
break;
case “orange”:
x = “orange”;
break;
case “black”:
x = “black”;
break;
case “white”:
x = “white”;
break;
}
if (x == “white”) y = 14;
else y = 2;

}

function draw() {
ctx.beginPath();
ctx.moveTo((prevX - xval), (prevY - yval));
ctx.lineTo((currX - xval), (currY - yval));
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}

function erase() {
//var m = confirm(“Want to clear”);
//if (m) {
ctx.clearRect(0, 0, w, h);
//document.getElementById(“canvasimg”).style.display = “none”;
//}
}

function save() {
//document.getElementById(“canvasimg”).style.border = “2px solid”;
var dataURL = canvas.toDataURL();
//document.getElementById(“canvasimg”).src = dataURL;
//document.getElementById(“canvasimg”).style.display = “inline”;
return dataURL;
}

function findxy(res, e) {
if (res == ‘down’) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;

    flag = true;
    dot_flag = true;
    if (dot_flag) {
        ctx.beginPath();
        ctx.fillStyle = x;
        ctx.fillRect((currX - 5), (currY - 140), 2, 2);
        ctx.closePath();
        dot_flag = false;
    }
}
if (res == 'up' || res == "out") {
    flag = false;
}
if (res == 'move') {
    if (flag) {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - canvas.offsetLeft;
        currY = e.clientY - canvas.offsetTop;
        draw();
    }
}

}

[gobiyau]

I am not familiar with Canvas, but I see your program, I think it doesn’t matter with Onsen UI, may be it matters with Touch Input.

May be the article Using Touch Events with the HTML5 Canvas can help you.

Best Regards
Gobi