jquery mouse position in canvas, and live element in DOM?

My problem is I have a canvas of a colour spectrum and onclick it assigns the color clicked to various parts of the page. When the user clicks the canvas I get the position like so.

$('#colorPicker').click(function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var canvas1 = colorPicker.getContext('2d');
var data = canvas1.getImageData(x, y, 1, 1).data;
var rgb = 'rgb(' + data[0] + ',' + data[1] + ',' + data[2] + ')';
$('a').css({color: rgb});
}).disableSelection();

Only problem being that my canvas is in a jquery accordion, so the canvas position changes when the accordion changes, making my co-ordinates for the click handler attached to the canvas out by quite alot.

I tried adding a live 开发者_如何学Goevent to the click but that changed nothing, how can I get the correct coordinates for the pointer within the canvas, is there a live way of getting the x and y values??

---

To get the click position relative to the <canvas> (assuming #colorPicker is the <canvas>):

var x = e.offsetX,
    y = e.offsetY;