Zielony Smok - logo witryny

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

 

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

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);