用图像替换光标以在javascript中用作目标

Question

我已经尝试了几个星期来解决这个问题并且我走到了尽头。

作为警告，我对编码很新，我可能无法理解。

我试图在鼠标位置绘制图像。

到目前为止这是我的剧本

$(function()
    {
        var canvas = $('#canvas')[0];
        var context = canvas.getContext("2d"); 

        var img = new Image();
        img.src = 'cross.png';

        function getTopLeft(elm)
            {
            var x, y = 0;
            x = elm.offsetLeft;
            y = elm.offsetTop;
            elm = elm.offsetParent;

            while(elm != null)
                {
                    x = parseInt(x) + parseInt(elm.offsetLeft);
                    y = parseInt(y) + parseInt(elm.offsetTop);
                    elm = elm.offsetParent;
                }
                return {Top:y, Left: x};
            }

        canvas.style.cursor = "none";
        canvas.addEventListener("mousemove", function (ev)
            {
                var mouseX = ev.pageX - getTopLeft(canvas).Left;
                var mouseY = ev.pageX - getTopLeft(canvas).Top;
            });


        function animate()
            {
                context.onmousemove = function(evt)
                {
                 context.clearRect(0,0,canvas.width,canvas.height);
                    context.drawImage(img, Left, Top);
                }
            }
    }); 

        I think the problem lies in defining the x y value of the picture ive tried  every variable used in the code but to no avail the script loads without error but doesnt draw the image at the mouse location.
        I have just realised also that i need the image to be centred over the mouse position.