Położenie wskaźnika myszy w kształcie

Strona używa skryptów events.js oraz figures.js

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

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('mousemove', function() {
		var mousePos = events.getMousePos();
		var mouseX = mousePos.x-50;
		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 gwiazdą");
	});
	this.closeShape();
	});
};