Zdarzenia myszy związane z obrazkiem

Strona używa skryptu events.js

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

Kliknij myszą w obrębie ikony 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("Zdarzenia 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("mousedown", function(){
			writeMessage("Naciśnięto klawisz myszy w obrębie obrazka");
		});
		this.addShapeEventListener("mouseup", function(){
			writeMessage("Zwolniono klawisz myszy w obrębie obrazka");
		});
		this.addShapeEventListener("mouseover", function(){
			writeMessage("Mysz w obrębie obrazka");
		});
		this.addShapeEventListener("mouseout", function(){
			writeMessage("Mysz poza obrazkiem");
		});
		this.closeShape();
	});
};
window.onload = function(){
	var imageA = new Image();
	imageA.onload = function(){
		drawImage(this);
	}
	imageA.src="images/Ceh50j.png";
};