Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Obscure canvas rendering issue

ngiatsog
ngiatsog
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>

cor-el moo ko soppali ci

All Replies (4)

ngiatsog
ngiatsog Ki laajte
more options

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

Helpful?

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 Contributor
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.

Helpful?

ngiatsog
ngiatsog Ki laajte
more options

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

Helpful?

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 Contributor
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.)

Helpful?

Laajal dara

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.