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