Question

To keep it simple, the following javascript and css works fine in Chrome and Firefox. Once I test it in IE, after I trigger any code related to the position of the mouse, such as changing the mousepointer, the Y value goes completely bonkers. It adds 90 pixels or almost doubles, etc.
Code and style as follows:

<style>
    #miContenedor{
        width:780px;
        height:1600px;
        margin:auto;
        margin-top:185px;
        position:relative;
        border: 4px solid black;
    }
    #miCanvas{
        background-image:url(Images/mat06pag34.png);
        background-repeat:no-repeat;
    }
</style>
<script>
canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(toi){
    var posx = toi.layerX;
    var posy = toi.layerY;
    if(toi.layerX == undefined || toi.layerY == undefined){
        posx = toi.offsetX;
        posy = toi.offsetY;
    }
}//ProcessClick

canvas.onmousemove = function(tamos){
    var posxX = tamos.layerX;
    var posyY = tamos.layerY;
    if(tamos.layerX == undefined || tamos.layerY == undefined){
        posxX = tamos.offsetX;
        posyY = tamos.offsetY;
    }
    var coords = posxX + "," + posyY; ctx.clearRect(700, 300, 80, 40); ctx.fillText(coords, 700, 320);
    if(posxX>=30 && posxX<=420 && posyY>=380 && posyY<=400){
        canvas.style.cursor = "help";
    }
    else{
        canvas.style.cursor = "default";
    }
}//onmousemove
</script>

Answer 1

Found out that it was the scrolling of the page that messed up my coordinates. Tried the scrollLeft and scrollTop but in the end found a more simple solution: try for offsetX / offsetY first, then layerX / layerY.

canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(toi){
    var posx = toi.offsetX;
    var posy = toi.offsetY;
    if(toi.offsetX == undefined || toi.offsetY == undefined){
        posx = toi.layerX;
        posy = toi.layerY;
    }
    var coord = "Click en: " + posx + "," + posy;
    if(posx>=100 && posx<=200 && posy>=100 && posy<=200){
        ctx.clearRect(250, 235, 500, 30);
        ctx.fillText(coord, 250, 250);
    }
}//ProcessClick

canvas.onmousemove = function(tamos){
    var posxX = tamos.offsetX;
    var posyY = tamos.offsetY;
    if(tamos.offsetX == undefined || tamos.offsetY == undefined){
        posxX = tamos.layerX;
        posyY = tamos.layerY;
    }
    var coords = posxX + "," + posyY; ctx.clearRect(250, 335, 500, 30); ctx.fillText(coords, 250, 350);
    if(posxX>=100 && posxX<=200 && posyY>=100 && posyY<=200){
        canvas.style.cursor = "pointer";
    }
    else{
        canvas.style.cursor = "default";
    }
}//onmousemove