What I try to do:
Have a column being a button and running a JS on button click, which provides a simple canvas and a send button, so to sign via mouse or finger, if on touch screen device. Then the resulting base64 data URL should be stored to the column i have for it.
This way, I want to be able to provide users to sign handwritten and have the signature stored o their entry.
Unfortunately, my script wont run, or better it does run but also does nothing. Where am I wrong?
var canvas = document.createElement(“canvas”);
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);
var ctx = canvas.getContext(“2d”);
//set background color
ctx.fillStyle = “grey”;
ctx.fillRect(0, 0, canvas.width, canvas.height);
var isMouseDown = false;
canvas.addEventListener(“mousedown”, startDrawing);
canvas.addEventListener(“mousemove”, draw);
canvas.addEventListener(“mouseup”, stopDrawing);
canvas.addEventListener(“touchstart”, startDrawing);
canvas.addEventListener(“touchmove”, draw);
canvas.addEventListener(“touchend”, stopDrawing);
function startDrawing(e) {
isMouseDown = true;
ctx.beginPath();
ctx.moveTo(getX(e), getY(e));
}
function draw(e) {
if (!isMouseDown) return;
ctx.lineTo(getX(e), getY(e));
ctx.stroke();
}
function stopDrawing() {
isMouseDown = false;
}
function getX(e) {
if (e.changedTouches) {
return e.changedTouches[0].clientX - canvas.offsetLeft;
} else {
return e.clientX - canvas.offsetLeft;
}
}
function getY(e) {
if (e.changedTouches) {
return e.changedTouches[0].clientY - canvas.offsetTop;
} else {
return e.clientY - canvas.offsetTop;
}
}
var sendBtn = document.createElement(“button”);
sendBtn.innerHTML = “Send”;
document.body.appendChild(sendBtn);
sendBtn.addEventListener(“click”, function() {
var dataURL = canvas.toDataURL();
// do something with dataURL here
// just for testing, later we write the url into a column
output.text(dataURL);
});
