帆布线已经偏移到鼠标位置

Question

在firefox中检查此帆布示例，该笔划有一个偏移到鼠标位置？在铬它的作品。我该如何解决它？

这里JS提琴： http://jsfiddle.net/wongwong/CvhMM/2/

var canvas, context; 

// Initialization sequence. 
function init() { 
// Find the canvas element. 
canvas = document.getElementById('imageView'); 


// Get the 2D canvas context. 
context = canvas.getContext('2d'); 


// Attach the mousemove event handler. 
canvas.addEventListener('mousemove', ev_mousemove, false); 
} 

// The mousemove event handler. 
var started = false; 
function ev_mousemove (ev) { 
var x, y; 

// Get the mouse position relative to the canvas element. 
if (ev.layerX || ev.layerX == 0) { // Firefox 
    x = ev.layerX; 
    y = ev.layerY; 
    console.log(ev.layerX); 
} else if (ev.offsetX || ev.offsetX == 0) { // Opera 
    x = ev.offsetX; 
    y = ev.offsetY; 
} 

// The event handler works like a drawing pencil which tracks the mouse 
// movements. We start drawing a path made up of lines. 
if (!started) { 
    context.beginPath(); 
    context.moveTo(x, y); 
    started = true; 
} else { 
    context.lineTo(x, y); 
    context.stroke(); 
} 
} 

init(); 

Answer 1

你只需要考虑到画布元素抵消

// Get the mouse position relative to the canvas element. 
    if (ev.layerX || ev.layerX == 0) { // Firefox 
    // added -this.offsetLeft, and -this.offsetTop 
     x = ev.layerX - this.offsetLeft; 
     y = ev.layerY - this.offsetTop; 

     console.log(ev.layerX); 
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera 
     x = ev.offsetX; 
     y = ev.offsetY; 
    } 

Live Demo