title: canvas- line has offset to mouse position
body: <p>Checking out this canvas example in firefox, the stroke has an offset to the mouse position? In chrome it works. How can I fix it?</p>
  
  <p>here a js fiddle:
      <a href="http://jsfiddle.net/wongwong/CvhMM/2/" rel="nofollow">http://jsfiddle.net/wongwong/CvhMM/2/</a></p>
  
  <pre><code>  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();
  </code></pre>