JavaScript / HTML5 program Help (moving Objs)
 

Good Evening All,

Im new to JavaScript and html world,
more over I have an assignment to draw an object on canvas and move it around,
I managed to draw the objects and locate their positions on canvas but wasnt able to make them move..

this is my code :
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
eraseAllButton = document.getElementById('eraseAllButton'),
strokeStyleSelect = document.getElementById('strokeStyleSelect'),
guidewireCheckbox = document.getElementById('guidewireCheckbox'),
drawingSurfaceImageData,
mousedown = {},
rubberbandRect = {},
dragging = false,
guidewires = guidewireCheckbox.checked,
w = 20, h = 20;
count = 0;
boxesXCo = [];
boxesYCo = [];

// Functions..........................................................
function drawGrid(color, stepx, stepy) {
context.save()

context.strokeStyle = color;
context.lineWidth = 0.5;
context.clearRect(0, 0, context.canvas.width, context.canvas.height);

for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, context.canvas.height);
context.stroke();
}

for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
context.stroke();
}

context.restore();
}

function windowToCanvas(x, y) {
var bbox = canvas.getBoundingClientRect();
return { x: x - bbox.left * (canvas.width / bbox.width),
y: y - bbox.top * (canvas.height / bbox.height) };
}

// Save and restore drawing surface...................................
function saveDrawingSurface() {
drawingSurfaceImageData = context.getImageData(0, 0,
canvas.width,
canvas.height);
}

function restoreDrawingSurface() {
context.putImageData(drawingSurfaceImageData, 0, 0);
}


function drawRubberbandShape(loc) {
context.beginPath();
context.moveTo(mousedown.x, mousedown.y);
//context.lineTo(loc.x, loc.y);

context.stroke();
}

function updateRubberband(loc) {
//updateRubberbandRectangle(loc);
context.restore();
drawRubberbandShape(loc);
}

// Guidewires.........................................................
function drawHorizontalLine (y) {
context.beginPath();
context.moveTo(0,y+0.5);
context.lineTo(context.canvas.width,y+0.5);
context.stroke();
}

function drawVerticalLine (x) {
context.beginPath();
context.moveTo(x+0.5,0);
context.lineTo(x+0.5,context.canvas.height);
context.stroke();
}

function drawGuidewires(x, y) {
context.save();
context.strokeStyle = 'rgba(0,0,230,0.4)';
context.lineWidth = 0.5;
drawVerticalLine(x);
drawHorizontalLine(y);
context.restore();
}

// Canvas event handlers..............................................
canvas.onmousedown = function (e) {
var loc = windowToCanvas(e.clientX, e.clientY);

e.preventDefault(); // prevent cursor change

saveDrawingSurface();
mousedown.x = loc.x;
mousedown.y = loc.y;
dragging = true;

};

canvas.onmousemove = function (e) {
var loc;

if (dragging) {
e.preventDefault(); // prevent selections

loc = windowToCanvas(e.clientX, e.clientY);
restoreDrawingSurface();
updateRubberband(loc);

if(guidewires) {
drawGuidewires(loc.x, loc.y);
}
}
if((count<=3)&&(count>0)){
if(((mousedown.x<=(boxesXCo[0]+w)&&(mousedown.x>=boxesXCo[0]))&&
((mousedown.y<=(boxesYCo[0]+h)&&(mousedown.y>=boxesYCo[0]))))){
count--;
context.fillStyle = 'white';
context.fillRect(e.clientX,e.clientY,w,h);}

else if(((mousedown.x<=(boxesXCo[1]+w)&&(mousedown.x>=boxesXCo[1])))&&
((mousedown.y<=(boxesYCo[1]+h)&&(mousedown.y>=boxesYCo[1])))){
count--;
context.fillStyle = 'white';
context.fillRect(e.clientX,e.clientY,w,h);}

else if((mousedown.x<=(boxesXCo[2]+w)&&(mousedown.x>=boxesXCo[2]))&&
((mousedown.y<=(boxesYCo[2]+h)&&(mousedown.y>=boxesYCo[2])))){
count--;
context.fillStyle = 'white';
context.fillRect(e.clientX,e.clientY,w,h);}
};

//Trying to implement moving shapes but need to store values of drawn objs

};

canvas.onmouseup = function (e) {
loc = windowToCanvas(e.clientX, e.clientY);
restoreDrawingSurface();
updateRubberband(loc);
dragging = false;
if (count <3)
{
var i = 0;
context.fillRect(e.clientX,e.clientY,w,h);
boxesXCo[i] = e.clientX;
boxesYCo[i] = e.clientY;

count++;
}
else;
//context.fillRect(mousedown.x,mousedown.y,w,h,"FF0982");
};

// Controls event handlers.......................................

eraseAllButton.onclick = function (e) {
context.clearRect(0, 0, canvas.width, canvas.height);
drawGrid('lightgray', 10, 10);
saveDrawingSurface();
count =0;
context.restore();
};

strokeStyleSelect.onchange = function (e) {
context.strokeStyle = strokeStyleSelect.value;
context.fillStyle = strokeStyleSelect.value;
};

guidewireCheckbox.onchange = function (e) {
guidewires = guidewireCheckbox.checked;
};

// Initialization................................................
context.strokeStyle = strokeStyleSelect.value;
context.fillStyle = strokeStyleSelect.value;
drawGrid('lightgray', 10, 10);


//context.fillRect(mousedown.x,mousedown.y,(mousedown.x+50),(mousedown.x+50),"FF0982");
//context.drawRect(mousedown.x-50,mousedown.y-50,mousedown.x+50,mousedown.y+50);

hope to get some help / hints

thankful for your time