Не видно объектов массива.
 

Здравствуйте есть код

var ws;
var canvas;
var boats;
window.requestAnimFrame = function(){
    return  window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function(/* function */ callback, /* DOMElement */ element){
            window.setTimeout(callback, 1000 / 60);
        };
};

function Boat(x,y){       
   this.coorinates = [x,y] 
}                          

function addBoat(data){
    tanks.push(new Tank(data.x,data.y));
    alert(tanks.length);
}

function init(){
    ws = new WebSocket("ws://localhost:8080/Servlet");
    ws.onopen = function(data){};
    ws.onmessage = function(data){message(data);};
    canvas = document.getElementById("mcanvas").getContext("2d");
    boats = [];
    requestAnimFrame(runn());
}
function runn(){

    render();

    requestAnimFrame(runn());
}

function render(){
 
    for(var i in boats){

        canvas.fillRect(boats[0].coorinates[0],boats[0].coorinates[1],10,10);
   }
  
}


function message(data){
    var serverMessage = JSON.parse(data.data);
    if(serverMessage.type == "join"){
        addBoat(serverMessage);
    }
};

$(function(){
    init();
});

извиняюсь за может быть тупой код, но пока лучше не умею.
1) подскажите пожалуйста, я в общем правильно использую requestAnimationFrame?
2)функция render не хочет ничего рисовать и считает что массив boats пуст. Хотя addBoat успешно выполняется, если в нем вставить alert(boats.length) -> 1. а если это же вставить в render, то будет 0. Если render вставить после addBoat, то все рисуется. В чем проблема? помогите, пожалуйста.

Спасибо.