[Noobloid]

курсовик поджимает?

<canvas id="myCan" width="500" height="500" style="border: 2px solid #000000"></canvas>
      <button type="button" onclick="drawgrid()">Нарисовать решотку</button>
      <button type="button" onclick="clearGrid()">Стереть решотку</button>
        <p>Мыша: <span id="x">0</span></p>
        <p> <span id="y">0</span></p>
        <hr>
      </div>



<script>
  var can = document.getElementById('myCan');
  var ctx = can.getContext('2d');
  var step = 20;//шаг решотки
  //рисуем
  function drawgrid(){
    for (var i = step; i<can.width; i+=step){//рисуем вертикальные
      ctx.beginPath();
      ctx.moveTo(i, 0);
      ctx.lineTo(i, can.height);
      ctx.closePath();
      ctx.stroke();
    }
    for (var i = step; i<can.height; i+=step){//рисуем Горизонтальные
      ctx.beginPath();
      ctx.moveTo(0, i);
      ctx.lineTo(can.width, i);
      ctx.closePath();
      ctx.stroke();
    }

  }
  //стираем
  function clearGrid(){
    ctx.clearRect(0, 0, can.width, can.height);
  }
  //мыша
  can.addEventListener('mousemove', function(evt){
    document.getElementById('x').innerHTML = evt.pageX;
    document.getElementById('y').innerHTML = evt.pageY;
  });

</script>