Raphael offsetParent property

drawing and SVG from a different position and re adjusting its coordinates to make mouse events appear

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
    <div id="container"></div>
</body>

CSS

#container {
    margin: 0 auto;
    overflow: auto;
    background-color: gray;
    width: 500px;
    height: 500px;
}

JavaScript

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 - findPos(this)[0];
    var mouseY = e.pageY - findPos(this)[1];
    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: .25,
    });
}

function findPos(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj == obj.offsetParent);
        console.log(curleft);
        console.log(curtop);
        // return [curleft, curtop];
    }
    return [curleft, curtop];
}