title: replacing cursor with image to be used as target in javascript
body: <p>I've tried for a couple of weeks to trouble shoot this problem and I've come to a dead end.</p>
  
  <p>as a word of warning I'm very new to coding and I may not be able to understand much.</p>
  
  <p>I'm trying to draw an image at the location of the mouse.</p>
  
  <p>this is my script so far</p>
  
  <pre><code>$(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.
  </code></pre>