$(function(){
  var w = 60;
  var h = 60;
  var canvas = $('<canvas>').prependTo('#demo');
  canvas.attr({width:w,height:h});
  var ctx = canvas[0].getContext("2d");
  
  ctx.beginPath();
  ctx.fillStyle = "rgba(0,0,0,.5)";
  ctx.fillRect(0,0,w,h);
  ctx.moveTo (w/2,0);
  ctx.lineTo (w,h/2);
  ctx.lineTo (w/2,h);
  ctx.lineTo (0,h/2);
  ctx.fill();
  ctx.closePath();


  canvas.on('tap click', function(){
    clickAction(ctx);
  });
  function clickAction(ctx){
    //座標合わせ
    var rect = event.target.getBoundingClientRect();
    var ex = event.clientX - rect.x;
    var ey = event.clientY - rect.y;
    //倍率合わせ
    scale =  w/ canvas.width();
    x = ex * scale//Math.floor(ex * scale); 
    y = ey * scale//Math.floor(ey * scale);

    //描画実行
    drawPointer(ctx, x, y)
  }

  function drawPointer(ctx, x, y){
    console.log({x,y});
    ctx.beginPath();
    ctx.fillStyle = "rgba(0,0,0,.5)";
    ctx.fillRect(x-1,y-1,2,2);
    ctx.fill();
    ctx.closePath();
  }
  

  var win  = Math.min($(window).width(), $(window).height())
  canvas.css({width:win, height:win});


})

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-css/css3-canvas-dot-scale/