Just dealing with HTML5 canvas. I need to acplish some mouse interaction to it. like a draw a rect or a line. Specifically what I need to do is to draw a dynamic line during mousemove calls. It means. mousemove 1 draw a line from x1,y1 to x2,y2 mousemove 2 delete the previous line. Set x1 = x2, and y1 = ys and repeat the previous process until i catch mouseup where I consolidate the line.

From my times on windows api programing I remember xoring those lines worked fine. Is there a similar approach in case on jscript canvas?

Also: Capturing the mouse from mousedown to mouseup would be wonderful. Is that possible?. If that can't be done will just give the process terminated on mouseout.

Any help please?

Just dealing with HTML5 canvas. I need to acplish some mouse interaction to it. like a draw a rect or a line. Specifically what I need to do is to draw a dynamic line during mousemove calls. It means. mousemove 1 draw a line from x1,y1 to x2,y2 mousemove 2 delete the previous line. Set x1 = x2, and y1 = ys and repeat the previous process until i catch mouseup where I consolidate the line.

From my times on windows api programing I remember xoring those lines worked fine. Is there a similar approach in case on jscript canvas?

Also: Capturing the mouse from mousedown to mouseup would be wonderful. Is that possible?. If that can't be done will just give the process terminated on mouseout.

Any help please?

• javascript
• html
• canvas

• when you are drawing with mouse, mousemove events will be triggered continuously, how are you planning to differentiate above said mouse move 1 from mouse move 2, if there is no events triggered in between like mouseup? – T J Commented Mar 16, 2014 at 19:15
• on mouse down i set a var drawing=true. Then set x2=x1=mousex and the same for y. Then updating x2 in every mousemove. There is a mistake in my post. x1 should remain the same all along in the process. in every mousemove delete the oldline and set x2 = mousex and y2=mousey then draw the new line. In windows api there was a way to draw lines xoring pixels. I wonder if I can do the same with canvas. – mdev Commented Mar 16, 2014 at 19:19

2 Answers 2

A basic demo (may need tweeking): http://jsfiddle/m1erickson/H7vRw/

You can request the browser to send mouse events (mousedown, mouseup, mousemove) to functions that will handle those events.

// add an html canvas element

<canvas id="canvas" width=300 height=200></canvas>

// ask the browser to send mouse events to handler functions
// for example, mousedown events will be sent to the handleMouseDown function
// this example uses jQuery for browser patibility

$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseUp(e);});

In the mousedown handler:

• get the mouse position.
• set a flag indicating that a drag has begun
• save the mouse position (it will be the beginning point of the line)

Mousedown code:

function handleMouseDown(e){

  // let the browser know we will handle this event

  e.preventDefault();   

  // get the mouse position

  var mouseX=parseInt(e.clientX-offsetX);
  var mouseY=parseInt(e.clientY-offsetY);

  // set an isDown flag to indicate dragging has started

  isDown=true;

  // save the starting mouse position 
  // (it will be the beginning point of the line);

  startX=mouseX;
  startY=mouseY;

}

In the mousemove handler code:

• get the mouse position
• clear the canvas and draw a line from the saved starting position to this mouse position

mousemove code:

function handleMouseMove(e){

  // if we're not dragging, ignore this mousemove

  if(!isDown){ return; }

  // let the browser know we will handle this event

  e.preventDefault();   

  // get the mouse position

  var mouseX=parseInt(e.clientX-offsetX);
  var mouseY=parseInt(e.clientY-offsetY);

  // draw the current line
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.beginPath();
  ctx.moveTo(startX,startY);
  ctx.lineTo(mouseX,mouseY);
  ctx.stroke()

}

In the mouseup handler:

• clear the dragging flag since the drag is done.

mouseup code:

function handleMouseUp(e){

  // let the browser know we will handle this event

  e.preventDefault();   

  // clear the dragging flag since the drag is donw

  isDown=false;

}

check this fiddle, not exactly what you need but hope it'll be helpfull to start with...

var el = document.getElementById('canvasId');
var ctx = el.getContext('2d');
var isDrawing;
el.onmousedown = function(e) {
  isDrawing = true;
  ctx.moveTo(e.clientX, e.clientY);
};
el.onmousemove = function(e) {
  if (isDrawing) {
  ctx.lineTo(e.clientX, e.clientY);
  ctx.stroke();
  }
};
el.onmouseup = function() {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  isDrawing = false;
};