Obscure canvas rendering issue
Hello, I have created a webpage with a canvas element that allows the user to draw an irregular path by pressing down the mouse, similar to the free drawing of a paint … (read more)
Hello,
I have created a webpage with a canvas element that allows the user to draw an irregular path by pressing down the mouse, similar to the free drawing of a paint application. The issue is that the very first time that the user presses the mouse, the line stops abruptly, while the next times the lines are drawn correctly. The events seem to fire correctly and the page works fine at Chromium, so it seems to be a Firefox issue. You can find the html page below. I am curious, what could be the problem?
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas</title>
<style>
#canvas {
background-color: whitesmoke;
border: solid 2px brown;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
function startDrawing(e) {
isDrawing = true;
context.beginPath();
context.moveTo(e.offsetX, e.offsetY);
}
function draw(e) {
if (isDrawing) {
context.lineTo(e.offsetX, e.offsetY);
context.stroke();
}
}
function stopDrawing(e) {
console.log("stopped drawing")
isDrawing = false;
}
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
var isDrawing = false;
canvas.width = 1000;
canvas.height = 1000;
context.strokeStyle = "#913d88";
context.lineWidth = 2;
canvas.onmousedown = startDrawing;
canvas.onmouseup = stopDrawing;
canvas.onmousemove = draw;
</script>
</body>
</html>