Hi everyone, I’m creating a webapp 2.0 in which I would like to manage the user’s signature on a touch screen monitor. I know that there are some plugins that allow you to do this but I think it can be done without it. Not being a javascript expert I have some difficulties. I found an html example that when loaded with a browser allows you to sign, but attempts made to handle it correctly in a Xojo project have failed. Could any of you kindly give me some pointers on this?
Thank you Oscar
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Canvas: Free-Hand Drawing</title>
<style>
body {
background: #e74c3c;
}
#canvas {
position: relative;
left: calc(50% - 390px);
top: 50px;
border: 1px dotted black;
cursor: crosshair;
background: #ecf0f1;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<canvas id="canvas"></canvas>
<!-- partial -->
<script type="text/javascript">
var canvas;
var context;
window.onload = function() {
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
canvas.width = 780;
canvas.height = 490;
context.strokeStyle = "#913d88";
context.lineWidth = 2;
canvas.onmousedown = startDrawing;
canvas.onmouseup = stopDrawing;
canvas.onmousemove = draw;
function startDrawing(e) {
isDrawing = true;
context.beginPath();
context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
}
function draw(e) {
if (isDrawing == true) {
var x = e.pageX - canvas.offsetLeft;
var y = e.pageY - canvas.offsetTop;
context.lineTo(x, y);
context.stroke();
}
}
function stopDrawing() {
isDrawing = false;
}
/*var coord = document.getElementById("coord");
canvas.onmousemove = function(e) {
coord.value = e.pageX+" "+e.pageY+" / "+(e.pageX-canvas.offsetLeft)+" "+(e.pageY-canvas.offsetTop);
}*/
}
</script>
</body>
</html>