Получение изображения через websocket

Я использую websockify для отображения изображений с сервера python на HTML5 холст.

Я думаю, что мне удалось успешно отправить изображения с моего сервера python, но я не могу отобразить изображения на своем холсте.

Я думаю, что проблема связана с количеством байтов, которые я пытаюсь отобразить на холсте, и я считаю, что я не жду, пока будет получено все изображение, а затем отображаю изображение на холсте.

До сих пор у меня:

Функция включения сообщений. Когда я отправляю изображение, я получаю 12 MESSAGERECEIVED в консоли

  ws.on('message', function () {
    //console.log("MESSAGERECEIVED!")
            msg(ws.rQshiftStr());
  });

Функция msg, в которой я получаю строку и пытаюсь отобразить ее на холсте. Я вызываю метод 12 раз для каждого изображения. Формат сообщения: 'xÙõKþ ° pãüCY :

function msg(str) {
        //console.log(str);
        console.log("RELOAD");

        var ctx = cv.getContext('2d');
        var img = new Image();
        //console.log(str);
        img.src = "data:image/png;base64," + str;
        img.onload = function () {
            ctx.drawImage(img,0,0);
        }
    }

Есть предложения, как это исправить?