javascript - Html5 Canvas shape movement and collision, only first shape created has collision?

Question

It seems that when I create shapes on HTML5 canvas, only the first shape I create actually has working collision. Each shape should knock into eachother but this is not the case.

Here is the movement and collision check code:

function handleMouseMove(event)
{
var mouse = canvas.getMouseCoordinates(event);
if (mouseIsDown && canvas.selected)
{
    if (shapes.length > 0)
    {
        for (var i = 0; i < shapes.length; i++)
        {
            canvas.selected.oldX = canvas.selected.x;
            canvas.selected.oldY = canvas.selected.y;
            canvas.selected.x = canvas.selected.x + (mouse.x - canvas.mouseX);
            canvas.selected.y = canvas.selected.y + (mouse.y - canvas.mouseY);
            if (canvas.selected != shapes[i] && canvas.selected.collides(shapes[i], canvas.selected))
            {
                canvas.selected.x = canvas.selected.oldX;
                canvas.selected.y = canvas.selected.oldY;
            }
            canvas.mouseX = mouse.x;
            canvas.mouseY = mouse.y;
        }
    }
}
}

Also want to note that the other shapes correctly detect collision when selected but they don't block (IE oldX and x are equal). The above code is the only place those values are changed.