I have this code but I can't get it to draw correctly I don't know why.
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>All Clientes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
canvas{ border: 1px solid black; }
</style>
<script type="text/javascript">
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var x = "black",
y = 2;
function init() {
canvas = document.getElementById('canvasFirma');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', e)
}, false);
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function erase() {
var m = confirm("Want to clear");
if (m) {
ctx.clearRect(0, 0, w, h);
document.getElementById("canvasimg").style.display = "none";
}
}
function save() {
document.getElementById("canvasimg").style.border = "2px solid";
var dataURL = canvas.toDataURL();
document.getElementById("canvasimg").src = dataURL;
document.getElementById("canvasimg").style.display = "inline";
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
draw();
}
}
}
</script>
<body onload="init()">
<form method="POST" action="/guardar">
<input type="hidden" th:value="${usuario.nombre}" name="nombre">
<input type="hidden" th:value="${usuario.email}" name="correo">
</br> </br>
<h1 class="text-center header">Datos empleado</h1>
<div class="container my-2">
<div>
<input type="submit" value="Guardar" name="Guardar" >
</div>
<div class="card-body">
Nombre:<p th:text="${usuario.nombre}"></p>
Email:<p th:text="${usuario.email}"></p>
<div class="contenedor" aling="center">
<h3 aling="center">Firma</h3>
<div class="row">
<div class="col-md-1" aling="center">
<canvas id="canvasFirma" aling="center" width="200" height="200" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It uses the
offsetX
and propertiesoffsetY
of the evente
.The documentation for
offsetX
says:My free translation:
You should adjust the coordinate in case the canvas has any padding .
Learn more about _offsetX at w3schools .