Przeciąganie i upuszczanie kształtu

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

function writeMessage(message) {
				wiad.innerHTML = message;
			};
window.onload = function() {
	var events = new Events("canvas");
	var cv = events.getCanvas();
	var ctx = events.getContext();
	var wiad = document.getElementById("wiad");
	var starX = cv.width / 2 - 75;
	var starY = cv.height / 2 - 75;
	var dragStar = false;
	var starOffsetX = 0.0;
	var starOffsetY = 0.0;
	events.addStage(function() {
		var mousePos = this.getMousePos();
		if (dragStar) {
			starX = mousePos.x - starOffsetX;
			starY = mousePos.y - starOffsetY;
		}
		this.clear();
		writeMessage("Przeciąganie i upuszczanie gwiazdy");
		this.beginShape();
		ctx.beginPath();
		ctx.strokeStyle = "black";
		ctx.fillStyle = "red";
		drawStar(ctx,starX,starY,150,40,5);
		ctx.fill();
		ctx.stroke();
		this.addShapeEventListener("mousedown", function() {
			dragStar = true;
			var mousePos = events.getMousePos();
			starOffsetX = mousePos.x - starX;
			starOffsetY = mousePos.y - starY;
		});
		this.addShapeEventListener("mouseup", function() {
			dragStar = false;
		});
		this.addShapeEventListener("mouseover", function() {
			document.body.style.cursor = "pointer";
		});
		this.addShapeEventListener("mouseout", function() {
			document.body.style.cursor = "default";
		});
		this.closeShape();
	});
};