html - タッチイベントにオフセットを設定する方法

Question

ipad で x 座標と y 座標の正確な位置を取得できません。私が間違っていることを説明できますか？キャンバスを使って絵に色を塗れる子供向けのお絵かきアプリです。その色付けですが、エラーは、ユーザーが画面に触れたポイントから開始し、接点のわずかに下にあるということです。モバイルまたはタブレットでこれをテストできます。リンクはhttp://talentedash.co.uk/color/paint.htmlです。動作しないため、デスクトップでこれを試さないでください

<script type="text/javascript">
  var canvas = null; //canvas object
  var context = null; //canvas's context object
  var clearBtn = null; //clear button object
  var defaultColor="#3577BB";
  var defaultShape="round";
  var defaultWidth=50;

  /*boolean var to check if the touchstart event
  is caused and then record the initial co-ordinate*/
  var buttonDown = false;

  //onLoad event register
  window.addEventListener('load', initApp, false);

  function initApp() {
    setTimeout(function() { window.scrollTo(0, 1); }, 10); //hide the address bar of the browser.
    canvas = document.getElementById('paintBox');
    clearBtn = document.getElementById('clearBtn');

    initializeEvents();

    context = canvas.getContext('2d'); //get the 2D drawing context of the canvas
    context.strokeStyle = defaultColor;
    context.lineJoin = defaultShape;
    context.lineWidth = defaultWidth;

  /*Main image*/
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }

      var sources = {
        main: 'transparent-charac1.png',
      };

      loadImages(sources, function(images) {
        context.drawImage(images.main, 0, 0, 400, 800);
        context.globalCompositeOperation = "destination-atop";
      });
}


function initializeEvents() {
  canvas.addEventListener('touchstart', startPaint, false);
  canvas.addEventListener('touchmove', continuePaint, false);
  canvas.addEventListener('touchend', stopPaint, false);

  clearBtn.addEventListener('touchend', clearCanvas,false);
}


function clearCanvas() {
  context.clearRect(0,0,canvas.width,canvas.height);
}

function startPaint(evt) {
  if(!buttonDown)
  {
    context.beginPath();
    context.moveTo(evt.touches[0].pageX, evt.touches[0].pageY);
    buttonDown = true;
  }
  evt.preventDefault();
}

function continuePaint(evt) {
  if(buttonDown)
  {
    context.lineTo(evt.touches[0].pageX ,evt.touches[0].pageY);
    context.stroke();
  }
}
function setColor(col)
{
    context.strokeStyle = col;
}

function setSize(px)
{
    context.lineWidth=px;
}
function stopPaint() {
  buttonDown = false;
}
</script>