88 lines
2.3 KiB
JavaScript
88 lines
2.3 KiB
JavaScript
// JavaScript Document v1.2
|
|
|
|
const canvas = document.getElementById('signatureCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
let drawing = false;
|
|
|
|
function myTestFunction(variable1, variable2) {
|
|
console.log(variable1, variable2);
|
|
// Your logic here
|
|
}
|
|
// Get the canvas element
|
|
|
|
|
|
// Function to get the canvas offset
|
|
function getCanvasOffset() {
|
|
const rect = canvas.getBoundingClientRect();
|
|
//console.log("offsetX:",rect.left, " OffsetY:",rect.top)
|
|
return {
|
|
offsetX: rect.left,
|
|
offsetY: rect.top
|
|
};
|
|
}
|
|
|
|
|
|
function clearCanvas() {
|
|
console.log("Clear Signature area")
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
function startDrawing(e) {
|
|
console.log("Start Signature Capture")
|
|
//console.log(e)
|
|
drawing = true;
|
|
draw(e);
|
|
}
|
|
|
|
function endDrawing() {
|
|
console.log("Stopped Signature Capture")
|
|
drawing = false;
|
|
ctx.beginPath();
|
|
}
|
|
|
|
function draw(e) {
|
|
//console.log(e)
|
|
if (!drawing) return;
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.strokeStyle = '#000';
|
|
|
|
const { offsetX, offsetY } = getCanvasOffset();
|
|
let x = e.clientX - offsetX //canvas.offsetLeft;
|
|
let y = e.clientY - offsetY //canvas.offsetTop;
|
|
//console.log("X:",x," Y:",y)
|
|
|
|
//let x = e.clientX - canvas.offsetLeft;
|
|
//let y = e.clientY - canvas.offsetTop;
|
|
//console.log("X:", x, " Y:", y)
|
|
ctx.lineTo(x, y);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
}
|
|
|
|
|
|
function generateRandomIdentifier(size) {
|
|
|
|
if (size > 20) {
|
|
let size = 20
|
|
console.log("randomIdentifier Exceeded max len of 20. Defaults to 20 ")
|
|
}
|
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
|
let randIdentifier = '';
|
|
for (let i = 0; i < size; i++) {
|
|
const randomIndex = Math.floor(Math.random() * characters.length);
|
|
randIdentifier += characters[randomIndex];
|
|
}
|
|
console.log("Random randIdentifier: ", randIdentifier);
|
|
return randIdentifier;
|
|
}
|
|
//canvas.addEventListener('mousedown', startDrawing);
|
|
//canvas.addEventListener('mouseup', endDrawing);
|
|
//canvas.addEventListener('mousemove', draw);
|
|
|
|
// ** TOUCH EVENT LISTNERS FOR TABLETS
|
|
|
|
//canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]));
|
|
//canvas.addEventListener('touchend', endDrawing);
|
|
//canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));
|