Przeciąganie i upuszczanie obrazka

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

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");
	var imageX = cv.width / 2 - imageA.width / 2;
	var imageY = cv.height / 2 - imageA.height / 2;
	var dragImage = false;
	var imageOffsetX = 0.0;
	var imageOffsetY = 0.0;
	events.addStage(function() {
		var mousePos = this.getMousePos();
		if (dragImage) {
			imageX = mousePos.x - imageOffsetX;
			imageY = mousePos.y - imageOffsetY;
		}
		this.clear();
		writeMessage("Przeciąganie i upuszczanie obrazka");
		this.beginShape();
		ctx.drawImage(imageA, imageX, imageY, imageA.width, imageA.height);
		ctx.beginPath();
		ctx.rect(imageX, imageY, imageA.width, imageA.height);
		this.addShapeEventListener("mousedown", function() {
			dragImage = true;
			var mousePos = events.getMousePos();
			imageOffsetX = mousePos.x - imageX;
			imageOffsetY = mousePos.y - imageY;
		});
		this.addShapeEventListener("mouseup", function() {
			dragImage = false;
		});
		this.addShapeEventListener("mouseover", function() {
			document.body.style.cursor = "pointer";
		});
		this.addShapeEventListener("mouseout", function() {
			document.body.style.cursor = "default";
		});
		this.closeShape();
	});
};
window.onload = function() {
	var imageA = new Image();
	imageA.onload = function(){
		drawImage(this);
	}
	imageA.src="images/Ceh50j.png";
};