title: How can I get the line to draw where the cursor is positioned? HTML5 canvas using MrDoob's Harmony
body: <p><strong>QUESTION</strong></p>
  
  <p>How can I get the line to draw where the cursor is positioned?</p>
  
  <p><strong>DETAILS</strong></p>
  
  <p>I'm trying to draw a line freehand on html5 canvas using MrDoob's harmony script (https://github.com/mshuler/harmony). I've edited the canvas so that it has a specific width and height (before it covered the whole page). I then position it using the following CSS</p>
  
  <pre><code>canvas 
  {
      position:absolute;
      top:0px; left:0px;
  }
  </code></pre>
  
  <p>When I draw on the canvas (using the mouse) the lines are drawn as per normal, but if I position the canvas like this</p>
  
  <pre><code>canvas 
  {
      position:absolute;
      top:100px; left:0px;
  }
  </code></pre>
  
  <p>the line appears lower than the position of the cursor.</p>
  
  <p><strong>QUESTION: How can I get the line to draw where the cursor is positioned?</strong></p>
  
  <p>Here is my code.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>canvas 
  {
      position:absolute;
      top:100px; left:0px;
  }
  
  #writepad
  {
      display:block;
      width:700px;
      height:500px;
  }       
  </code></pre>
  
  <p><strong>JAVASCRIPT (Main.js)</strong></p>
  
  <pre><code>    SCREEN_HEIGHT = $('#writepad').innerHeight();// SCREEN_HEIGHT = window.innerHeight,
  
  init();
  
  function init()
  {
      var hash, palette, embed, localStorageImage;
  
      document.body.style.backgroundRepeat = 'no-repeat';
      document.body.style.backgroundPosition = 'center center';   
  
      container = document.createElement('div'); 
      document.body.appendChild(container);
  
      canvas = document.createElement("canvas");
      canvas.width = SCREEN_WIDTH;
      canvas.height = SCREEN_HEIGHT;
      canvas.style.cursor = 'crosshair';
      container.appendChild(canvas);
  
      context = canvas.getContext("2d");
  
      flattenCanvas = document.createElement("canvas");
      flattenCanvas.width = SCREEN_WIDTH;
      flattenCanvas.height = SCREEN_HEIGHT;   
  }
  
  
  // WINDOW
  
  function onWindowMouseMove( event )
  {
      mouseX = event.clientX;
      //console.log("mouseX=",mouseX);
      mouseY = event.clientY;
      //console.log("mouseY=",mouseY);
  }
  
  function onWindowResize()
  {
      SCREEN_WIDTH = window.innerWidth;
      SCREEN_HEIGHT = window.innerHeight; 
      menu.container.style.left = ((SCREEN_WIDTH - menu.container.offsetWidth) / 2) + 'px';   
      about.container.style.left = ((SCREEN_WIDTH - about.container.offsetWidth) / 2) + 'px';
      about.container.style.top = ((SCREEN_HEIGHT - about.container.offsetHeight) / 2) + 'px';
  }
  
  function onWindowBlur( event )
  {
      shiftKeyIsDown = false;
      altKeyIsDown = false;
  }
  
  // CANVAS
  
  function onCanvasMouseDown( event )
  {
      var data, position;
      clearTimeout(saveTimeOut);
      cleanPopUps();
  
      if (altKeyIsDown)
      {
          flatten();      
          data = flattenCanvas.getContext("2d").getImageData(0, 0, flattenCanvas.width, flattenCanvas.height).data;
          position = (event.clientX + (event.clientY * canvas.width)) * 4;
          console.log("position=",position);      
          foregroundColorSelector.setColor( [ data[position], data[position + 1], data[position + 2] ] );     
          return;
      }
  
      BRUSH_PRESSURE = wacom &amp;&amp; wacom.isWacom ? wacom.pressure : 1;   
      brush.strokeStart( event.clientX, event.clientY );
      window.addEventListener('mousemove', onCanvasMouseMove, false);
      window.addEventListener('mouseup', onCanvasMouseUp, false);
  }
  
  function onCanvasMouseMove( event )
  {
      BRUSH_PRESSURE = wacom &amp;&amp; wacom.isWacom ? wacom.pressure : 1;   
      brush.stroke( event.clientX, event.clientY );
  }
  
  function onCanvasMouseUp()
  {
      brush.strokeEnd();  
      window.removeEventListener('mousemove', onCanvasMouseMove, false);
      window.removeEventListener('mouseup', onCanvasMouseUp, false);
  }
  
  function onCanvasTouchStart( event )
  {
      cleanPopUps();      
      if(event.touches.length == 1)   {
          event.preventDefault();     
          brush.strokeStart( event.touches[0].pageX, event.touches[0].pageY );        
          window.addEventListener('touchmove', onCanvasTouchMove, false);
          window.addEventListener('touchend', onCanvasTouchEnd, false);
      }
  }
  
  function onCanvasTouchMove( event )
  {
      if(event.touches.length == 1)
      {
          event.preventDefault();
          brush.stroke( event.touches[0].pageX, event.touches[0].pageY );
      }
  }
  
  function onCanvasTouchEnd( event )
  {
      if(event.touches.length == 0)
      {
          event.preventDefault();     
          brush.strokeEnd();
          window.removeEventListener('touchmove', onCanvasTouchMove, false);
          window.removeEventListener('touchend', onCanvasTouchEnd, false);
      }
  }
  
  function flatten()
  {
      var context = flattenCanvas.getContext("2d");   
      context.fillStyle = 'rgb(' + BACKGROUND_COLOR[0] + ', ' + BACKGROUND_COLOR[1] + ', ' + BACKGROUND_COLOR[2] + ')';
      context.fillRect(0, 0, canvas.width, canvas.height);
      context.drawImage(canvas, 0, 0);
  }
  </code></pre>