Performance issue when dragging/zooming high resolution image in KonvaJS canvas

Question

I am currently loading a rather large image (15000x10000) into a konva canvas. The canvas is draggable in another canvas. The image is not drawn if parts of it leave the view of the browser. The main problem is that the dragging is not smooth when zoomed out of the canvas just a little bit and zooming out of and into the image is quite stuttery.

The image gets loaded from the file system, turned into a Blob, an object url is created like window.URL.createObjectURL(...), passed to an HTMLImageElement and then passed to a Konva.Image.

Is there a way to speed up the drawing perfromance of the image when dragging/zooming or is the only way to make it faster to downsample the original image?

Answer 1

15000x10000 is huge. It is hard for browser to handle that size.

If a user see only part of that image, you should split it into several smaller parts. You can do that dynamically in the real-time using several canvas elements. You can use Konva.Image to display canvas on the layer. You can generate such canvas elements in the realtime.

If a use to see full image, most likely it is scaled down, so you can decrease image size, without loosing visible quality. With Konva you can easily use caching for that. Here how you can make image width and height 2x smaller:

imageShape.cache({ pixelRatio: 0.5 });