График на canvas

[ВэйДлин]

Возможно ли на canvas реализовать
1. Полотно с сеткой на фоне (клеточки)
2. Мне надо знать позицию курсора относительно полотна и выводить её в хинте над мышкой
3. При клике на полотно появляется точка координаты которой мы точно знаем и можем получить из вне
4. При повторном клике на эту точку она исчезает

Сроки поджимают, желание глубоко изучать canvas сейчас нет, как и времени,
так что нагло прошу список методов или в лучшем случае простой пример хотя бы для одного пункта

[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>

[ВэйДлин]

Скорее диплом х)

Теперь остался ещё один основной вопрос, как поставить точку и записать её местоположение и в любой момент стереть её

[caetus]

var canvas = document.getElementById('canvas'),
      ctx = canvas.getContent('2d');
canvas.addEventListener('click', fn, false);

function fn (e) {
var x = e.pageX - canvas.offsetLeft, y = e.pageY - canvas.offsetTop;
}

стереть можно разными способами , например
ctx.fillRect(x, y,  w,h)

[ВэйДлин]

Да, но на фоне решетка, она тоже сотрется, а её трогать не надо, как тут поступить?