62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
// JavaScript Document
|
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
|
|
console.log("DOM Loaded. Signature script loaded")
|
|
|
|
const canvas = document.getElementById('signatureCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
let drawing = false;
|
|
|
|
// 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() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
function startDrawing(e) {
|
|
console.log("Start Drawing")
|
|
drawing = true;
|
|
draw(e);
|
|
}
|
|
|
|
function endDrawing() {
|
|
console.log("Stopped Drawing")
|
|
drawing = false;
|
|
ctx.beginPath();
|
|
}
|
|
|
|
function draw(e) {
|
|
console.log(e)
|
|
if (!drawing) return;
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.strokeStyle = '#000';
|
|
|
|
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);
|
|
}
|
|
|
|
canvas.addEventListener('mousedown', startDrawing);
|
|
canvas.addEventListener('mouseup', endDrawing);
|
|
canvas.addEventListener('mousemove', draw);
|
|
|
|
canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]));
|
|
canvas.addEventListener('touchend', endDrawing);
|
|
canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));
|
|
|
|
}) |