Home/ Questions/Q 6568731
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T14:30:58+00:00

I am trying to write some JavaScript that draws a line by dragging the

  • 0

I am trying to write some JavaScript that draws a line by dragging the mouse, and then removes it when you let go of left click.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

window.onload = function() {
  window.stop = false
  window.canvas = document.getElementById("e");
  window.context = canvas.getContext("2d");
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
  window.pos = Shift();
}

function Shift() {
  e = window.event
  var posx = 0;
  var posy = 0;
  if (!e) var e = window.event;
  if (e.pageX || e.pageY)   {
    posx = e.pageX;
    posy = e.pageY;
  }
    else if (e.clientX || e.clientY)    {
    posx = e.clientX + document.body.scrollLeft
                 + document.documentElement.scrollLeft;
    posy = e.clientY + document.body.scrollTop;
                     + document.documentElement.scrollTop;
  }
  posx -= document.getElementById('e').offsetLeft;
  posy -= document.getElementById('e').offsetTop;
  return[posx,posy];
}

function up(){
  document.getElementById('e').onmousemove = null;
  canvas.width = canvas.width;
}

function mov(){
  canvas.width = canvas.width;
  window.pos = Shift();
  context.moveTo(window.start[0],window.start[1]);
  context.lineTo(pos[0],pos[1]);
  context.stroke();
}

function down(){
  window.start = Shift();
  document.getElementById('e').onmousemove = "mov()";
}

</script>
</head>
<body>
  <canvas id="e" onMouseDown="down()" onmousemove="" onMouseup="up()"></canvas>
</body>
</html>

This example does not work and throws no errors. If

   document.getElementById('e').onmousemove = "mov()";

is commented out and onmousemove is set to

onmousemove="mov()"

then it works, but obviously a line can only be drawn once. Also neither of the examples worked in FireFox. Tested in Chrome.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change this:

    document.getElementById('e').onmousemove = "mov()";

    To this:

    document.getElementById('e').onmousemove = mov;

    You want to assign .onmousemove to a function reference, not to a string. Note that there are no parentheses: if you assign ...onmousemove = mov() it will run the mov() function and assign onmousemove to the return from the function (undefined, with this particular function). Without the parentheses it assigns it to the function itself.

    • 0