Mouse Coords over Multiple Canvases HTML5/Javascript

I'm trying to use 2 canvases, I want them both to accept an image dropped into them and use mouseclicks to manipulate the images. Here is the code I'm working on.

I have it where if I only have the eventlisteners for the 'droppedImage' canvas it works ok, as soon as I put in handlers for the 'changeImage' canvas it sees the 2nd canvas and reports the coordinates as an extension of the 1st canvas and it no longer displays the the RGB values or change the background of the 3rd canvas 'selectedColour'

Posting this as I head to bed, if anyone gives answers or requires further info I will pop on tomorrow before work to update.

window.onload = function() {
    var droppedImage = document.getElementById("droppedImage"),
        ctx = droppedImage.getContext("2d");
    droppedImage.addEventListener("mouseup", mpos);
        // init event handlers
    droppedImage.addEventListener("dragenter", dragEnter, false);
    droppedImage.addEventListener("dragexit", dragExit, false);
    droppedImage.addEventListener("dragover", dragOver, false);
    droppedImage.addEventListener("drop", drop, false);

        var changeImage = document.getElementById("changeImage"),
        ctx = changeImage.getContext("2d");
    changeImage.addEventListener("mouseup", mpos);
    // init event handlers
    changeImage.addEventListener("dragenter", dragEnter, false);
    changeImage.addEventListener("dragexit", dragExit, false);
    changeImage.addEventListener("dragover", dragOver, false);
    changeImage.addEventListener("drop", drop, false);

    var selectedColour = document.getElementById("selectedColour");

function dragEnter(evt) {
    evt.stopPropagation();
    evt.preventDefault();
}

function dragExit(evt) {
    evt.stopPropagation();
    evt.preventDefault();
}

function dragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
}

function drop(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files;
    var count = files.length;

    // Only call the handler if 1 or more files was dropped.
    if (count >0)   
        importImage(files);
}




function mpos(e) {
    var cX = 0,
        cY = 0;

    if (event.pageX || event.pageY) {
        cX = event.pageX;
        cY = event.pageY;
    }
    else {
        cX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        cY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    cX -= droppedImage.offsetLeft;
    cY -= droppedImage.offsetTop;

   // ctx.fillRect(cX, cY, 2, 2);

   alert("X co-ord : "+ cX +", Y co-ord : "+ cY);
   var imageData = ctx.getImageData(cX, cY, 1, 1);
   alert("Pixel 1: "+ imageData.data[0]+", "+imageData.data[1]+", "+ imageData.data[2]+", "+ imageData.data[3]);
   selectedColour.style.backgroundColor = "rgb("+imageData.data[0]+","+imageData.data[1]+","+imageData.data[2]+")";

}
}


function importImage(files) {

    var file = files[0];
    var reader = new FileReader;
    reader.onloadend = handleReaderLoadEnd; 
    reader.readAsDataURL(file);



function handleReaderLoadEnd(evt){     


    var canvas = document.getElementsByTagName('canvas')[0];
    var ctx = canvas.getContext('2d');
    var img = new Image;
        img.src = event.target.result;          
        img.onload = function() {       
        width = img.width;
        height = img.height;        
        var scaleX, scaleY, scale;
        var scaledWidth, scaledHeight;
        scaleX = width / canvas.width;
        scaleY = height / canvas.height;
        scale = scaleX > scaleY ? scaleX : scaleY;
        scaledWidth = width / scale;
        scaledHeight = height / scale;
        ctx.clearRect(0,0, canvas.width, canvas.height);
        ctx.drawImage(img, (canvas.width - scaledWidth) / 2, (canvas.height - scaledHeight) / 2, scaledWidth, scaledHeight);

        }
    }


}