I am working on creating an HTML5 page with a customer signature box, intended for tablet use. This involves using a Canvas element and JavaScript events triggered by mouse actions.
Challenge 1: The Y-axis functionality works as expected, but the X-axis behavior only functions correctly if the canvas width is set to 300 pixels. If the width is increased to 500 pixels, drawing at x-coordinate 300 results in the line appearing at the 500px mark on the canvas. Despite not setting anything to 300px in the code, this issue persists.
Challenge 2: I have implemented code to prevent scrolling on tablets so that users can sign within the canvas (refer to the "prevent" variable in JavaScript). However, this feature is not functioning properly.
HTML:
<div id="canvasDiv">
<canvas id="canvasSignature"></canvas>
</div>
CSS: (Sets the width to be responsive up to 500px, while maintaining a height of 150px)
#canvasDiv
{
float: left;
width: 100%;
height: 150px;
max-width: 500px;
}
#canvasSignature
{
width: 100%;
height: 100%;
background-color: #F0F0F0;
border: 1px solid Black;
cursor: crosshair;
}
JavaScript:
<script type="text/javascript">
$(document).ready(function () {
initialize();
});
var prevent = false;
// Derives the X and Y position within the canvas based on the page's coordinates
function getPosition(mouseEvent, element) {
var x, y;
if (mouseEvent.pageX != undefined && mouseEvent.pageY != undefined) {
x = mouseEvent.pageX;
y = mouseEvent.pageY;
} else {
x = mouseEvent.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = mouseEvent.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x = x - element.offsetLeft;
return { X: x, Y: y - element.offsetTop };
}
function initialize() {
// Retrieve references to the canvas element and the 2D drawing context
var element = document.getElementById("canvasSignature");
var context = element.getContext("2d");
// Start drawing when the mousedown event occurs, and set up handlers to draw lines as the mouse moves
$("#canvasSignature").mousedown(function (mouseEvent) {
var position = getPosition(mouseEvent, element);
context.moveTo(position.X, position.Y);
context.beginPath();
prevent = true;
// Attach event handlers
$(this).mousemove(function (mouseEvent) {
drawLine(mouseEvent, element, context);
}).mouseup(function (mouseEvent) {
finishDrawing(mouseEvent, element, context);
}).mouseout(function (mouseEvent) {
finishDrawing(mouseEvent, element, context);
});
});
document.addEventListener('touchmove', function (event) {
if (prevent) {
event.preventDefault();
}
return event;
}, false);
}
// Draws a line to the specified x and y coordinates within the element using the provided context
function drawLine(mouseEvent, element, context) {
var position = getPosition(mouseEvent, element);
context.lineTo(position.X, position.Y);
context.stroke();
}
// Completes the drawing by connecting the last point to the finishing coordinates and unbinding event handlers associated with mouse down actions
function finishDrawing(mouseEvent, element, context) {
// Draw the final line
drawLine(mouseEvent, element, context);
context.closePath();
// Unbind any related event handlers
$(element).unbind("mousemove")
.unbind("mouseup")
.unbind("mouseout");
prevent = false;
}
</script>