Mouse interaction in html5 canvas. drawing lines

Question

Just dealing with HTML5 canvas. I need to accomplish 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?

Answer 1

A basic demo (may need tweeking): http://jsfiddle.net/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 compatibility

$("#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;

}

Answer 2

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;
};