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 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>Modified by cor-el
All Replies (4)
there are standard DOCTYPE, head, body tags that the form doesn't let me post.
You can do a replace in your favorite text editor:
< to <
so that the site doesn't interpret the tags as HTML it needs to filter or render.
Thank you jscher2000! The HTML now shows correctly. Can you replicate this behavior?
When I test in a clean profile, it seems fine.
In my regular (heavily customized profile), I have to disable my "Can Select" style rule because Firefox keeps selecting the canvas, which interferes with drawing new lines on it. However, I don't think most people will have that issue. (For reference, the background flashes blue and eventually stays blue, and then when starting a new line, Firefox behaves like I'm trying to move the whole drawing and shows a "can't move" symbol. After that, the pen stays active until I click again. The only way to avoid that problem seems to be to click outside the canvas to deselect it when it's blue.)