Question

I’m receiving images via a websocket in base64 format and then drawing the images on a canvas using:

var img=new Image();
img.onload = function() {
    cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
};

img.src = "data:image/jpeg;base64,"+imgData;

Is it possible to change this code and somehow only draw the pixels that have changed? And if it is possible, would this even increase the performance? Thanks for the help. 🙂

Answer 1

What would be more efficient first would be to only send/receive images deltas ( what has changed) between images, then draw that on your canvas.