画布笔触不在左上角时偏移

Question

I tried out a basic stroke on a canvas. Everything was going fine until I added a toolbar and a gallery. Now, the stroke is offset from the mouse down and mouse move actions. Any suggestions?

http://jsfiddle.net/embrande/5aggd34h/

var canvas = document.getElementById('canvasID');
var context = canvas.getContext('2d');
var radius = 10
var dragging = false;

var canvasArea = document.getElementById('canvasArea');

//canvas.width = window.innerWidth;
//canvas.height = window.innerHeight;
canvas.width = 500;
canvas.height = 500;
//canvasArea.style.left = "0px";
//canvasArea.style.top = "0px";
//canvasArea.style.position = "relative";



context.lineWidth = radius*2;

var putPoint = function(e){
    if(dragging){
        context.miterLimit = 1;
        context.lineTo(e.clientX, e.clientY);
        context.stroke();
        context.beginPath();
        context.arc(e.clientX, e.clientY, radius, 0, Math.PI*2);
        context.fill();
        context.beginPath();
        context.moveTo(e.clientX, e.clientY);
    }

}
var engage = function(e){
    dragging=true;  
    putPoint(e);

}
var disengage = function(e){

    dragging=false; 
    context.beginPath();

}


canvas.addEventListener('mousedown', engage);
canvas.addEventListener('mousemove', putPoint);// JavaScript Document
canvas.addEventListener('mouseup', disengage);

Answer 1

Try using offsetX and offsetY instead of clientX and clientY. But some browsers can't recognize offsetX and offsetY so try layerX and layerY but it is deprecated in chrome. another option is to minus offset top and offset left from clientY and clientX resp. Here is your updated code with offsetX and offsetY.

or you can use this function also to get exact offset

function getOffset(evt) {
  var el = evt.target,
      x = 0,
      y = 0;

  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }

  x = evt.clientX - x;
  y = evt.clientY - y;

  return { x: x, y: y };
}

Answer 2

You can use .getBoundingClientRect to get the mouse position adjusted for both the canvas position of the page and for the amount of scrolling of the page:

function handleMousedown(e){
    var BB=canvas.getBoundingClientRect();
    var mouseX=e.clientX-BB.left;
    var mouseY=e.clientY-BB.top;
    // ...
}

If you know the page won't be scrolled, you can improve performance by caching the left & top offsets once and reusing them:

var BB=canvas.getBoundingClientRect();
var bbLeft=BB.left;
var bbTop=BB.top;

function handleMousedown(e){
    var mouseX=e.clientX-bbLeft;
    var mouseY=e.clientY-bbTop;
    // ...
}