javascript - キャンバス内の複数のオブジェクトを x,y 座標に移動

Question

この「moveTo(x,y)」( markEによる) 関数を複数のオブジェクト に使用しようとしています。これは私が試したものです。そして、これは私がやろうとしていることです:

実際の例でオブジェクトを計算して移動すると、次のようになります。

pct += .01;
// if we're not done, request another animation frame
if (pct < 1.00) {
    requestAnimFrame(animate);
}

// Calculate the next XY position
var nextX = startingX + dx * pct;
var nextY = startingY + dy * pct;

// Draw the shape
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(nextX, nextY, 40, 30);

そして、これは、私が複数の形状に対してやろうとしていることです:

var shapesLength = shapes.length;
for (var i = 0; i < shapesLength; i++) {// Loop through every object

var tmpShape = shapes[i];//selecting shape

    tmpShape.pct += .01;// increment pct towards 100%

    // if we're not done, request another animation frame
    if (tmpShape.pct < 1.00) {
        requestAnimFrame(animate);
    }

    // Calculate the next XY position
    var nextX = tmpShape.startingX + tmpShape.dx * tmpShape.pct;
        var nextY = tmpShape.startingY + tmpShape.dy * tmpShape.pct;

    // Draw the shape
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(nextX, nextY, 10, 10);
};

しかし、何かがうまくいかず、私には何がわかりません。