canvas & images
 

Приветствую!
столкнулся с проблемой при рисовании картинок в canvas
раньше у меня было 1 изображение танка и оно должно было двигаться. Картинка рисовалось через requestAnimationFrame, и все было окей.
но сейчас мне понадобилось что бы в разных направлениях картинка танка поворачивалась соответственно направлению движения.
Была сделана 1 большая картинка, содержащая 4 нужных мне(по направлениям движения) и отрисовывались ее фрагменты, но тут обнаружилась проблема:
теперь при передвижении изображение танка периодически немного дергается. Вот код

function draw() {
    canvas.clearRect(0, 0, 600, 600);
    for (var g in tanks) {
        if (tanks[g] != null) {
            switch (tanks[g].direction) {

                case 1:
                    canvas.drawImage(image, 120, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
                case 2:
                    canvas.drawImage(image, 0, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
                case 3:
                    canvas.drawImage(image, 40, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
                case 4:
                    canvas.drawImage(image, 80, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
            }
        }
    }
    if (nextFrame != null) {
        nextFrame()
    }
}

Как это пофиксить?
Спасибо

может все-таки кто-нибудь знает?

сделайте демонстрацию ... как можно лечить зубы по фотографии:)

извините)
но всмысле демонстрацию?)
вот на всякий случай полный код:

var ws;
var tanks;
var canvas;
var nextFrame;
var interval;
var id;
var image;
$(function () {
    inittest();
});


function inittest() {

    window.addEventListener("keydown", function (e) {
        var key = e.keyCode;
        if (key == 32) {
            ws.send("fire")
        }
        if (key > 36 && key < 41) {
            switch (key) {
                case 37:
                    setDirection("left");
                    break;
                case 38:
                    setDirection("up");
                    break;
                case 39:
                    setDirection("right");
                    break;
                case 40:
                    setDirection("down");
                    break;
            }
        }
    }, false);

    ws = new WebSocket("ws://localhost:8080/drawServlet");
    ws.onopen = function (data) {
    };
    ws.onmessage = function (data) {
        onmessage(data);
    };
    canvas = document.getElementById("mcanvas").getContext("2d");//почему не работает $("#mcanvas")???
    tanks = [];
    rockets = [];
    image = new Image();
    image.src = "/images/sprite1.png";
    initFrame();
}
function onmessage(data) {
    var packet = JSON.parse(data.data);
    if (packet.type == "join") {
        tanks[packet.id] = new Tank(packet.id, packet.x, packet.y);
        id = packet.id;
    }
    else if (packet.type == "update") {
        updatetest(packet);
    }
    else if (packet.type == "leave") {
        tanks[packet.id] = null;
        delete tanks[packet.id];
    }
}
function draw() {
    canvas.clearRect(0, 0, 600, 600);
    for (var g in tanks) {
        if (tanks[g] != null) {
            switch (tanks[g].direction) {

                case 1:
                    canvas.drawImage(image, 120, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
                case 2:
                    canvas.drawImage(image, 0, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
                case 3:
                    canvas.drawImage(image, 40, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
                case 4:
                    canvas.drawImage(image, 80, 0, 40, 40, tanks[g].cor[0], tanks[g].cor[1], 40, 40);
                    break;
            }
        }
    }
    if (nextFrame != null) {
        nextFrame()
    }
}
function updatetest(lol) {
    for (var i in lol.data) {
        if (tanks[lol.data[i].id] != undefined) {
            tanks[lol.data[i].id].cor[0] = lol.data[i].x;
            tanks[lol.data[i].id].cor[1] = lol.data[i].y;
            tanks[lol.data[i].id].direction = lol.data[i].direction;
        }
        else {
            tanks[lol.data[i].id] = new Tank(lol.data[i].id, lol.data[i].x, lol.data[i].y)
        }
    }
}


function initFrame() {
    if (window.webkitRequestAnimationFrame) {
        nextFrame = function () {
            webkitRequestAnimationFrame(draw);
        };
    } else if (window.mozRequestAnimationFrame) {
        nextFrame = function () {
            mozRequestAnimationFrame(draw);
        };
    } else {
        interval = setInterval(draw(), 1000 / 30);
    }
    if (nextFrame != null) {
        nextFrame();
    }
}
function setDirection(dir) {

    ws.send(dir);
}

function Tank(id, x, y) {
    this.cor = [x, y];
    this.id = id;
    this.direction = 2;
}

вот изображение:

запускаемый пример на http://jsbin.com - я про это говорил.

поскольку у меня идут websockets я немного модифицировал код и убрал от туда websocket`ы
пример тут http://jsbin.com/welcome/32689/edit

и вы знаете, никакого дерганья не наблюдается( непонятно в чем причина тогда их в исходном коде

:) тогда сукроме debugger'а ничего посоветовать не могу.

хм ... интересно, могут ли сюда быть как-то замешаны вебсокеты?