mosuePos.js

var helpers = {
    getMouse: function(e, canvas) {
        return {
            x: e.pageX - canvas.offsetLeft,
            y: e.pageY - canvas.offsetTop
        }
    }
};

<style>body { text-align: center; } canvas { border: 1px solid black; margin: auto;}</style>

X: Y:

<script type='text/javascript' src='helpers.js'></script> <script> var canvas = document.getElementById("canvas"), context = canvas.getContext('2d');

            canvas.addEventListener('mousemove', function(e) {
                mousePos = helpers.getMouse(e, canvas);
                document.getElementById("xPos").innerHTML = mousePos.x
                document.getElementById("yPos").innerHTML = mousePos.y
            }, true)
    </script>
</body>