Двойная буфферизация, socket io

Подскажите, есть ли какие-то варианты двойной буфферизации в канвасе? Моя идея была в том чтоб отрисовать на buffer_canvas все что мне требуется, и затем вывести это на основной, и все даже работает, но изображение все равно мигает время от времени.

//сервер
setInterval(function() {
    for(var i in SOCKET_LIST){
        var socket = SOCKET_LIST[i]
        socket.emit('render_map', {
            star_systems, planets})
        }
}, 200)

//клиент
function draw(data){
    if (render_mode === "map") {
        for (i in data.star_systems) {
            img.star = new Image();
            img.star.src = '/img' + '/stars' + data.star_systems[i][2]; 
            star_size = data.star_systems[i][5];
            star_x = data.star_systems[i][3];
            star_y = data.star_systems[i][4];
            star_name = data.star_systems[i][1];
            buffer_ctx.drawImage(img.star,star_x - star_size,star_y - star_size, star_size, star_size); 
            buffer_ctx.fillText(star_name, star_x - star_size,star_y+30 - star_size);
        }
    }
}

socket.on('render_map', function(data){
    buffer_ctx.drawImage(img.space,0,0);
    draw(data);
    ctx.drawImage(buffer_canvas,0,0)
})

Ответы (1 шт):

Автор решения: Sergei Kirjanov

Тут видимо дело не в буфферизации (ее можно потом отключить попробовать).

star.src = асинхронный. К моменту drawImage(img.star картинка еще не подгружена. Проверьте, будет ли мигать с одной картинкой.

(Сам img объявлен не видно где; зачем он?)

Можно попробовать варианты:

  • пересылать графику в самом начале
  • досылать графику по самому сокету
  • не рисовать элемент до подгрузки

Для отрисовки оптимален requestAnimationFrame. Он происходит часто, и мог бы делать как-то так: if(needRedraw){ redraw(); needRedraw=false }.

А прибытие новых данных и картинок -- сбрасывать needRedraw

→ Ссылка