Simple use of mouse clicks to position a ball
You can get the bounding rectangle for a canvas. Consider:

function click(evt) {
    'use strict';
    var bound = canvas.getBoundingClientRect();
    ball_pos[0] = evt.clientX - bound.left;
    ball_pos[1] = evt.clientY - bound.top;
}


This should help you to avoid walking up the stack of objects to find the relative position.

See it working here:



var canvas, context, ball_pos;

var BALL_RADIUS = 15;

function start() {
    'use strict';
    canvas = document.getElementById('c');
    context = canvas.getContext('2d');
    ball_pos = [canvas.width / 2, canvas.height / 2];
}

function draw() {
    'use strict';

    // draw background
    context.fillStyle = "rgb(248,248,248)"; // off white
    context.fillRect(0, 0, canvas.width, canvas.height);

    // draw ball
    context.strokeStyle = 'black';
    context.lineWidth = 1;
    context.fillStyle = 'red';
    context.beginPath();
    context.arc(ball_pos[0], ball_pos[1], BALL_RADIUS, 0, Math.PI * 2, true);
    context.closePath();
    context.fill();
    context.stroke();
}

function animate() {
    'use strict';
    window.requestAnimationFrame(animate);
    draw();
}

function click(evt) {
    'use strict';
    var bound = canvas.getBoundingClientRect();
    ball_pos[0] = evt.clientX - bound.left;
    ball_pos[1] = evt.clientY - bound.top;
}

// register event handlers
window.onclick = click;

start();
animate();
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;canvas id="c" width="600" height="400"&gt;&lt;/canvas&gt;
&lt;/body&gt;
&lt;/html&gt;