title: Fixing the canvas offset in Raphael.js when DOM element centered
body: <p>I'm creating circles in a Raphael.js Canvas with a clicking action. When the canvas is drawn at the origin of the website it works fine. <strong>But when I move it to the middle some type offseting happens and only when you click on the right side of the canvas the circles are drawn at the left side of the canvas</strong>. Even though I have my listener action to the canvas and not the div that the   is append to, here is the code:</p>
  
  <pre><code>&lt;body&gt;
   &lt;div id="container"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is the JS:</p>
  
  <pre><code>var canvas = Raphael("container", 500, 500);
  var ourCanvas = $('svg').last();
  ourCanvas.attr("id", "canvas");
  var canvasHandler = $("#canvas");
  //We create a div with a class to append our canvas
  var containerHandler = $("#container");
  var circleClass = $("circle.quincy");
  var justDragged = false;
  canvasHandler.mouseup(function (e) {
  var mouseX = e.pageX;
  var mouseY = e.pageY;
  makeCircle(mouseX, mouseY);
  });
  
  
  
  function makeCircle(mouseX, mouseY) {
   var radius;
   var fill;
   var thisCirclesID = String(new Date().getTime());
   var circle = canvas.circle(mouseX, mouseY, 50).attr({
       fill: "hsb(.8, 1, 1)",
       stroke: "none",
       opacity: .5,
   });
  }
  </code></pre>
  
  <p>Here is a <a href="http://jsfiddle.net/mauricioSanchez/n2N3e/" rel="nofollow">JSFiddle</a></p>
  
  <p>I wonder if the way that I'm using the event position is correct. Any suggestion is more than welcome.</p>
  
  <p>Thanks</p>
  
  <p>M</p>