Dragging images
HTML
<canvas id="canvas"></canvas>
CSS
canvas {
border: 1px solid black;
}
JavaScript
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
c.height = 400;
c.width = 400;
var images = [];
var mouseX;
var mouseY;
var highestZ = 0;
var imageOffSetX = 0;
var imageOffSetY = 0;
c.addEventListener("mousedown", selectPiece, false);
c.addEventListener("mouseup", deSelectPiece, false);
c.addEventListener("mousemove", movePiece, false);
//my image object, stores the x- and y-coordinates as well as the layering
function imgObject (x,y,z,s) {
this.x = x;
this.y = y;
this.z = z;
this.active = false; //if it's being dragged
this.img = new Image();
this.img.src = s;
highestZ = images.length-1;
}
//creating the images
images[0] = new imgObject(100,100,0,"http://icons.iconarchive.com/icons/martin-berube/flat-animal/128/bunny-icon.png");
function movePiece(event) {
var x = new Number();
var y = new Number();
var canvas = document.getElementById("canvas");
if (event.x != undefined && event.y != undefined)
{
x = event.x;
y = event.y;
}
else // Firefox method to get the position
{
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
mouseX = x;
mouseY = y
for (var i=0; i<images.length; i++) {
if (images[i].activity === true) {
images[i].x = x-imageOffSetX;
images[i].y = y-imageOffSetY;
if (images[i].x+images[i].img.width/2 > c.width) {
c.width = images[i].x+images[i].img.width/2;
}
else if (images[i].y+images[i].img.height/2 > c.height) {
c.height = images[i].y+images[i].img.height/2;
}
}
}
}
function selectPiece(event) {
var savedZ=0;
var savedI=-1;
for (var i=images.length-1; i>=0; i--) {
images[i].activity = false;
if (mouseX > images[i].x-0.5*images[i].img.width &&
mouseX <...