How to track mouse movement how?

Question

JavaScript

There is a playing field drawn on a Canvas using drawImage
How to track the movement of the mouse when clicking on the blocks for further actions in the game?
Moreover, the movements can be in any direction
. Similar to the swype application

Answer 1

Here I have implemented both a mouse and a touch jsfiddle.net/4n4s8ccs/3
Based on the codes from the post ru.stackoverflow.com/a/418906

Answer 2

Take for example onclick:

canvas.onclick = function(e) {
  var ev = e || event; // берем событие
  var x = ev.clientX - canvas.getBoundingClientRect().left; // Можно это и не считать в Firefox, там есть ev.layerX и ev.layerY
  var y = ev.clientY - canvas.getBoundingClientRect().top;
  if(x > 100 && x < 200 &&
    y > 100 && y < 200) {
    // Выполнить действие для кнопки с X = 100, Y = 100, width = 100, height = 100
  }
}

Answer 3

document.addEventListener("mousemove", function() 
{ 
var mouseX = event.clientX+'px';
var mouseY = event.clientY+'px';
});

Pixels can be removed for the time being for css so that the block can be dragged right away ...