title: canvas offset- mouse pointer not synced
body: <p>the drawing not synced with mouse pointer, same goes to touch screen. I have set function getMouse(e) offset for mouse coordinates and function draw(event) for touch coordinates. It is only works for my pc. It doesn't compatible with different touch screen pcs. Where i should make changes and how. Please help.  </p>
  
  <p>here is the coding</p>
  
  <p><a href="http://jsfiddle.net/gFXam/" rel="nofollow">http://jsfiddle.net/gFXam/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;button onClick="openPopup();"&gt;drawing&lt;/button&gt;
  &lt;div id="test" class="popup" &gt;
  &lt;canvas id="canvas1" width="790" height="1110" style=" border:solid #00F"&gt; &lt;/canvas&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS    </p>
  
  <pre><code>   &lt;style&gt;
      #canvas1 {
          left:0;  /* adjust as needed */
          top:0;
          position: inline;
          width: 100%;
          height: 100%;
      }
      .popup{
          position:absolute;
          top:0px;
          left:0px;
          margin:0px;
          width: 764px;
          height: 1120px;
          font-family:verdana;
          font-size:13px;
          background-color:rgba(255, 255, 255, 0);
          border:2px solid green; 
          z-index:100000000000000000;
          display:none; 
          opacity:0.6; 
          filter:alpha(opacity=60);
          margin-left: 400px; 
          margin-top: 100px;
      }
      .cancel{
          display:relative;
          cursor:pointer;
          margin:0;
          float:right;
          height:10px;
          width:14px;
          padding:0 0 5px 0;
          background-image:url(/images/icon-cross.png);
          text-align:center;
          font-weight:bold;
          font-size:11px;
          color:white;
          border-radius:3px;
          z-index:100000000000000000;
      }
      .cancel:hover{
          background-color:#09F;
      }
      &lt;/style&gt;
  </code></pre>
  
  <p>SCRIPT :   </p>
  
  <pre><code>&lt;script&gt;
  function openPopup() {   
      var p = document.getElementById('test');
      p.style.display = 'block';
  
      canvas.width  = parseInt(p.style.width, '10'); //only when you use pixels
      canvas.height = parseInt(p.style.height, '10');
  }
  
  function closePopup() {
      document.getElementById('test').style.display = 'none';
  }
  
  
  
  function choosecolor(cps) {
      ctx.strokeStyle = cps; // red
  }
  
  var can = document.getElementById('canvas1');
  var ctx = can.getContext('2d');
  
  var isPressed = false;
  var mx = 4, my = 4;
  //http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing
  function clear_canvas_width ()
  {
      var s = document.getElementById ("canvas1");
      var w = s.width;
      s.width = 4;
      s.width = w;
      ctx.clear();
  }
  
  
  function move(e) {
    getMouse(e);
    if (isPressed) {
      ctx.lineTo(mx, my);
      ctx.stroke()
    }
  }
  
  function up(e) {
    getMouse(e);
    isPressed = false;
  }
  
  function down(e) {
    getMouse(e);
    ctx.beginPath();
    ctx.moveTo(mx, my);
    isPressed = true;
  }
  
  can.onmousemove = move;
  can.onmousedown = down;
  can.onmouseup = up;
  
  // for mouse:
  
  
  function getMouse(e) {
      var element = can, offsetX = 0, offsetY = 0;
      mx = e.pageX - 400;
      my = e.pageY - 108;
  }
  
  
  
          /*For touch screen*/ 
          window.addEventListener('load',function(){
          // get the canvas element and its context
          var canvas = document.getElementById('canvas1');
          var context = canvas.getContext('2d');
  
          // create a drawer which tracks touch movements
          var drawer = {
              isDrawing: false,
              touchstart: function(coors){
                  context.beginPath();
                  context.moveTo(coors.x, coors.y);
                  this.isDrawing = true;
              },
              touchmove: function(coors){
                  if (this.isDrawing) {
                      context.lineTo(coors.x, coors.y);
                      context.stroke();
                  }
              },
              touchend: function(coors){
                  if (this.isDrawing) {
                      this.touchmove(coors);
                      this.isDrawing = false;
                  }
              }
          };
          // create a function to pass touch events and coordinates to drawer
          function draw(event){
  
              // get the touch coordinates
              var coors = {
                  x: event.targetTouches[0].pageX - 400,
                  y: event.targetTouches[0].pageY - 100
              };
              // pass the coordinates to the appropriate handler
              drawer[event.type](coors);
          }
  
          // attach the touchstart, touchmove, touchend event listeners.
          canvas.addEventListener('touchstart',draw, false);
          canvas.addEventListener('touchmove',draw, false);
          canvas.addEventListener('touchend',draw, false);
  
          // prevent elastic scrolling
          document.body.addEventListener('touchmove',function(event){
              event.preventDefault();
          },false);   // end body.onTouchMove
  
      },false);   // end window.onLoad
  &lt;/script&gt;
  </code></pre>