Położenia wskaźnika myszy w obrazie

Strona używa skryptu events.js

W tym rozwiązaniu wiadomość jest zapisywana w elemencie zewnętrzym co niweluje konieczność wymazywania i odrysowywania całej powierzchni canvas

Kliknij myszą w obrębie ikony z kalendarza Majów

Listing

function writeMessage(message) {
	wiad.innerHTML = message;
};
function drawImage(imageA){
	var events = new Events("canvas");
	var cv = events.getCanvas();
	var ctx = events.getContext();
	var wiad = document.getElementById("wiad");
	writeMessage("ZPołożenie kursora myszy w obrębie obrazu");
	events.addStage(function(){
		this.clear();
		this.beginShape();
		ctx.drawImage(imageA, 100, 100,42,50);
		ctx.beginPath();
		ctx.rect(100,100,42,50);
		this.addShapeEventListener('mousemove', function() {
			var mousePos = events.getMousePos();
			var mouseX = mousePos.x - 100;
			var mouseY = mousePos.y - 100;
			var message = 'Mouse position x: ' + Math.round(mouseX)
					+ ', y: ' + Math.round(mouseY);
			writeMessage(message);
		});
		this.addShapeEventListener("mouseout", function() {
			writeMessage("Mysz poza obrazem");
		});
		this.closeShape();
	});
};
window.onload = function(){
	var imageA = new Image();
	imageA.onload = function(){
		drawImage(this);
	}
	imageA.src="images/Ceh50j.png";
};