OffsetX in html5 canvas works with IE, Safari, Chrome but not with Firefox

Question

http://jsfiddle.net/CQPeU/2/

The above jsfiddle is a sample code of horizontal scrolling in an html5 canvas. This feature seems to work for IE, Chrome and Safari and not for Firefox v25.0

Can anyone help me out with this? I think it has something to do with the translation of position on the screen. Because just a static html5 canvas works on Firefox.

thanks.

    var plot = [{
  x: 50,
  y: 100
}, {
  x: 200,
  y: 200
}, {
  x: 400,
  y: 300
}, {
  x: 500,
  y: 190
}];

var can = document.getElementById("can"),
  ctx = can.getContext('2d'),
  dragging = false,
  lastX = 0,
  translated = 0;

  var grid = (function(dX, dY){
  var can = document.createElement("canvas"),
      ctx = can.getContext('2d');
  can.width = dX;
  can.height = dY;
  // fill canvas color
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, dX, dY);

  // x axis
  ctx.strokeStyle = 'orange';
  ctx.moveTo(.5, 0.5);
  ctx.lineTo(dX + .5, 0.5);
  ctx.stroke();

  // y axis
  ctx.moveTo(.5, .5);
  ctx.lineTo(.5, dY + .5);
  ctx.stroke();

  return ctx.createPattern(can, 'repeat');
})(100, 50);

ctx.scale(1, -1);
ctx.translate(0, -400);

can.onmousedown = function (e) {
  var evt = e || event;
  dragging = true;
  lastX = evt.offsetX;
}

window.onmousemove = function (e) {
  var evt = e || event;
  if (dragging) {
    var delta = evt.offsetX - lastX;
    translated += delta;
    ctx.translate(delta, 0);
    lastX = evt.offsetX;
    draw();
  }
}

window.onmouseup = function () {
  dragging = false;
}

function draw() {
  ctx.clearRect(-translated, 0, 600, 400);
  ctx.rect(-translated, 0, 600, 400);
  ctx.fillStyle = grid;
  ctx.fill();
  ctx.fillStyle = "#fff";
  for (var i = 0; i < plot.length; i++) {
    ctx.beginPath();
    ctx.arc(plot[i].x, plot[i].y, 5, 0, 2 * Math.PI);
    ctx.fill();
  }
}

draw();

Answer 1

Problem is with offsetX

e.offsetX == undefined ? e.layerX : e.offsetX;

In Firefox, event.offsetX is undefined, but in Chrome and other browsers, it gives position, using pageX can solve your problem.

Updated Fiddle