I looked for solutions to this problem for a long time, found some and I thought I understand but apparently I don't. I'd like to make a canvas that ppl can use to sign to confirm a booking. But I can't get the line to follow the user's cursor. My code looks like this: HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Signature Test</title>
<link rel="stylesheet" href="../css/test.css">
<script src="../js/jquery-3.2.0.js"></script>
</head>
<body>
<header id="header">
</header>
<section id="content">
<canvas id="signaturePad">DSorry your browser is rubbish</canvas>
</section>
<footer>
</footer>
<script src="../js/test.js"></script>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
}
header
{
border: 1px solid black;
width: 100%;
height: 50px;
}
#content
{
border: 1px solid blue;
width: 100%;
height: 300px;
position: relative;
}
#content #signaturePad
{
border: 1px solid red;
width: 200px;
height: 200px;
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 100px);
}
footer
{
border: 1px solid black;
width: 100%;
height: 50px;
}
And finally the JS:
var canvas = document.getElementById("signaturePad");
var context = canvas.getContext("2d");
var radius = 1;
var dragging = false;
context.lineWidth = 2*radius;
function displayMousePosition(mouseX, mouseY) {
var header = document.getElementById("header");
header.innerHTML = "X : " + mouseX + "<br />Y : " + mouseY;
}
function getMousePosition(e) {
var mouseX = 0,
mouseY = 0,
elmX = 0,
elmY = 0,
obj = this;
//get mouse position on document crossbrowser
if (!e){e = window.event;}
if (e.pageX || e.pageY){
mouseX= e.pageX;
mouseY = e.pageY;
} else if (e.clientX || e.clientY){
mouseX = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
mouseY = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
//get parent element position in document
if (obj.offsetParent){
do{
elmX += obj.offsetLeft;
elmY += obj.offsetTop;
} while (obj = obj.offsetParent);
}
displayMousePosition(mouseX, mouseY);
return [mouseX, mouseY];
}
var putPoint = function(e) {
if(dragging) {
var offset = $("#signaturePad").offset();
var mouseX = getMousePosition(e)[0];
var mouseY = getMousePosition(e)[1];
context.lineTo(mouseX, mouseY);
context.stroke();
context.beginPath();
context.arc(mouseX, mouseY, radius, 0, Math.PI*2);
context.fill();
context.beginPath();
context.moveTo(mouseX, mouseY);
}
}
$(document).on("mousedown", "#signaturePad", function(e) {
dragging = true;
putPoint(e);
});
$(document).on("mouseup", "#signaturePad", function() {
dragging = false;
context.beginPath();
});
$(document).on("mousemove", "#signaturePad", function(e) {
putPoint(e);
});
And the fiddle if you wanna see it live: https://jsfiddle.net/Cellendhyll/yxguemf0/7/
