マウスイベント、タッチイベントの発生位置（座標）を取得するJavaScript

how to refer mouse/tap coordinates – GeoGebra

function ggbOnInit() {
  //グラフィックスビュー1を表示しているcanvasを取得
  var canvas = document.getElementsByTagName('canvas')[0];

  //リッスンしたくないイベントはコメントアウト
  canvas.addEventListener('click', getEventData);  //クリック
  canvas.addEventListener('mousemove', getEventData);  //マウスポインタ移動
  canvas.addEventListener('touchstart', getEventData);  //タップ
  canvas.addEventListener('touchmove', getEventData);  //スワイプ
}

//イベント発生位置を取得
function getEventData(evt){
  evt.preventDefault();

  //発生したイベントのタイプをログに吐き出す
  console.log('eventType = '+evt.type);
  //text1に書き出す
  ggbApplet.setTextValue('text1', 'eventType = '+evt.type);

  var result;  //結果格納用

  var canvas = document.getElementsByTagName('canvas')[0];  //グラフィックスビュー1を表示しているcanvasを取得
  var deviceType = window.ontouchstart===null?'touchDevice':'mouseDevice';  //タッチデバイスか、マウスデバイスかを判定

  //スケール調整用
  var canvasWidth = canvas.width;  //e.g. 1000
  var styleWidth = canvas.style.width;  //e.g. '1234px'
  styleWidth = eval( styleWidth.slice( 0, styleWidth.indexOf('px') ) );  //e.g. 1234

  var styleHeight = canvas.style.height;  //e.g. '1234px'
  styleHeight = eval( styleHeight.slice( 0, styleHeight.indexOf('px') ) );  //e.g. 1234

  var ratio = canvasWidth / styleWidth;

  //タッチデバイス用演算（マウスデバイスと違い、offsetXYプロパティが取れないため、やや計算が複雑）
  if(deviceType == 'touchDevice'){
    //pageXY
    var touchX = evt.changedTouches[0].pageX;
    var touchY = evt.changedTouches[0].pageY;

    //canvasの位置
    var clientRect = canvas.getBoundingClientRect();
    var positionX = clientRect.left + window.pageXOffset;
    var positionY = clientRect.top + window.pageYOffset;

    //加減
    var calcX = touchX - positionX;
    var calcY = touchY - positionY;

    //スケール調整（オフセット値にそろえる）
    calcX = calcX * styleWidth / clientRect.width;
    calcY = calcY * styleHeight / clientRect.height;

    result = [calcX, calcY];
  }

  //マウスデバイス用演算
  if(deviceType == 'mouseDevice'){
    result = [evt.offsetX, evt.offsetY];
  }

  //スケール調整前（オフセット値）、かつ、丸め前の値をログに吐き出す
  console.log('offsetData = '+result);
  //text2に書き出す
  ggbApplet.setTextValue('text2', 'offsetData = '+result);

  //スケール調整（現在のcanvasの大きさに合わせる）
  result[0] = ratio * result[0];
  result[1] = ratio * result[1];

  //丸め
  result[0] = Math.round( result[0] );
  result[1] = Math.round( result[1] );

  //スケール調整後、かつ、丸め後の値をログに吐き出す
  console.log('shapedData = '+result);
  //text3に書き出す
  ggbApplet.setTextValue('text3', 'shapedData = '+result);

  return result;
}