# 2d animation on html5 canvas using a vector and speed

Im moving a starship from one location to the other. In creating a vector, normalize and magnitude it.

Lets assume my vector looks like this

Vector
x: 156,
y: -90,
m:  180.0000000546,
nx:  0.8661855860486004,
ny: -0.49972245348957717,


The way im animating the ships movement currently is:

            if (! action.animated){
if (action.type == "move"){
if (game.ships[i].actions[j].v.m > 0){
// v is the Vector above !
game.ships[i].x += action.v.nx;
game.ships[i].y += action.v.ny;
game.ships[i].actions[j].v.m--;
}
else {
game.ships[i].actions[j].animated = true;
}


So basicly, im using requestanimationframe and a loop to move the starship by what equals 1 magnitude / 1 unit length (px) per frame. So far it is working (but for the fact that the vessel animates one more magnitude than it should).

However, assuming i have two starships and one has a vector magnitude of 180 while the other has a magnitude of 200 and im animating both at the same time, how can i create an animation that will move the faster starships quicker, i.e. both starships should begin moving and end moving in the same frame ?