PNG or JPG (not rgb) over websocket with ArrayBuffer without base64

Is there a way to render PNG to canvas without having to encode images to base64. Server sends png in binary, client receives it in ArrayBuffer and displays it on canvas. Only way i got this is to encode the data to base64 (on server side because I need it to be fast) and send it to client and create an image obj with data:image/png;base64 tag. I know you can create a blog and a file reader but I could not get that to work.

This is the blob version:

var blob        = new Blob([image.buffer],{type: "image/png"});
            var imgReader = new FileReader();
            imgReader.onload = function (e) {
                        var img = new Image();
                        img.onload = function (e) {
                    console.log("PNG Loaded");
                            ctx.drawImage(img, left, top);
                            window.URL.revokeObjectURL(img.src);    
                            img = null;

                        };
                        img.onerror = img.onabort = function () {

                    img = null;
                        };
                        img.src = e.target.result;
                        imgReader = null;
            }
            imgReader.readAsDataURL(blob);

image is Uint8Array. I create a blob from it. The rest is self explanatory.

Images are correct and valid png images. When I send it from the server, I wrote them to file one the server side and they render fine with an image viewer.