Inne zdarzenia myszy związane z kształtem

Strona używa skryptów events.js oraz figures.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 gwiazdy

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

Listing

window.onload = function(){
	function writeMessage(message) {
		wiad.innerHTML = message;
	};
	var events = new Events("canvas");
	var cv = events.getCanvas();
	var ctx = events.getContext();
	var wiad = document.getElementById("wiad");
	events.addStage(function(){
		this.clear();
		this.beginShape();
		ctx.beginPath();
		ctx.strokeStyle="black";
		ctx.fillStyle="red";
		drawStar(ctx,50,100,150,40,5);
		ctx.fill();
		ctx.stroke();
	this.addShapeEventListener("mousedown", function(){
		writeMessage("Naciśnięto klawisz myszy w obrębie gwiazdy");
	});
	this.addShapeEventListener("mouseup", function(){
		writeMessage("Zwolniono klawisz myszy w obrębie gwiazdy");
	});
	this.addShapeEventListener("mouseover", function(){
		writeMessage("Mysz w obrębie gwiazdy");
	});
	this.addShapeEventListener("mouseout", function(){
		writeMessage("Mysz poza gwiazdą");
	});
	this.closeShape();
	});
};