Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

Przeszukaj pomoc

Unikaj oszustw związanych z pomocą.Nigdy nie będziemy prosić Cię o dzwonienie na numer telefonu, wysyłanie SMS-ów ani o udostępnianie danych osobowych. Zgłoś podejrzaną aktywność, korzystając z opcji „Zgłoś nadużycie”.

Więcej informacji

Obscure canvas rendering issue

more options

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>

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? <pre><nowiki><!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></nowiki></pre><br>

Zmodyfikowany przez cor-el w dniu

Wszystkie odpowiedzi (4)

more options

there are standard DOCTYPE, head, body tags that the form doesn't let me post.

more options

You can do a replace in your favorite text editor:

< to &lt;

so that the site doesn't interpret the tags as HTML it needs to filter or render.

more options

Thank you jscher2000! The HTML now shows correctly. Can you replicate this behavior?

more options

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.)