Koordynaty wskaźnika myszy (2)
W tym rozwiązaniu wiadomość jest zapisywana w elemencie zewnętrznym co niweluje konieczność wymazywania i odrysowywania całej powierzchni canvas
Listing
function writeMessage(message) {
wiad.innerHTML=message;
};
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x : evt.clientX - rect.left,
y : evt.clientY - rect.top
};
};
var cv = document.getElementById("canvas");
var wiad = document.getElementById("wiad");
cv.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(cv, evt);
var message = 'Mouse position x: ' + Math.round(mousePos.x)
+ ', y: ' + Math.round(mousePos.y);
writeMessage(message);
}, false);