JavaScript - Canvas Drawing - Script Doesn't Work

Question

I wrote a very simple JavaScript that uses the HTML5 canvas. When the user clicks their mouse on the canvas the script gets their mouse coordinates, then when they move their mouse while holding it down it draws a line, this repeats until they let up on the mouse. But it does not work and I have no idea why? Thanks in advance for your help.

<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
</canvas>

<script>
// Canvas link
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

// Variables
var x1;
var y2;
var isPressed = false;

// Event listeners
context.addEventListener('mousedown', functionMouseDown, false);
context.addEventListener('mousemove', functionMouseMove, false);
context.addEventListener('mouseup', functionMouseUp, false);


function functionMouseDown() {
    // Get coordinates
    x1 = mousePos.x;
    y1 = mousePos.y;

    isPressed = true;
}

function functionMouseMove() {
     // If mouse is down and moved start drawing line
     if (isPressed == true) {
        drawLine();
     }
}

function functionMouseUp() {
    // Stop drawing line
    isPressed = false;
}

function drawLine() {
// Draw line
context.moveTo(x1,y1);
context.lineTo(x,y);
context.stroke();

// Set start coordinates to current coordinates
x1 = x;
y1 = y;
}
</script>
</body>
</html>

I started with an ActionScript and tired to convert it to JavaScript. — user1822824
– user1822824, Commented Dec 2, 2012 at 5:40

Paul Kaplan · Accepted Answer · 2012-12-02 06:01:41Z

There are several problems here. You need to get the mouse position, which is not simply stored in mousePos.x/y. You get through the mouse move event, passed as the first param to the function which is added as the listener for mousemove, mousedown, mouseup. Here is how I fixed it

  function functionMouseDown(e) {
      // Get coordinates
      x1 = e.clientX
      y1 = e.clientY;

      isPressed = true;
  }

  function functionMouseMove(e) {
       // If mouse is down and moved start drawing line
       if (isPressed == true) {
          drawLine(e);
       }
  }

  function functionMouseUp() {
      // Stop drawing line
      isPressed = false;
  }

  function drawLine(e) {
  // Draw line
  var x = e.clientX;
  var y = e.clientY;
  context.moveTo(x1,y1);
  context.lineTo(x,y);
  context.stroke();

  // Set start coordinates to current coordinates
  x1 = x;
  y1 = y;
  }

Collectives™ on Stack Overflow

JavaScript - Canvas Drawing - Script Doesn't Work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related