Free drawing performance about react-konva HOT 6 CLOSED

1. You have to measure the performance. What exactly is slow? React reconciler? Konva rendering?
2. Konva is not ideal for heavy free handle renders, by default Konva re-renders full scene. Usually, it is not very necessary for drawing apps
3. Use full power cache. For example, when you finish drawing, you can cache all previous lines, so Konva don't have re-render them again. Or you can convert all lines into bitmap image with external canvas manually.

from react-konva.

So instead of working with memo and so on, would you rather recommend going with the cache?
Do you have a short example, how to work with cache in react?

from react-konva.

So instead of working with memo and so on, would you rather recommend going with the cache?

First, you need to measure what is slow. it doesn't make sense to optimize Konva rendering if React part is slow.

Do you have a short example, how to work with cache in react?

Access node via https://konvajs.org/docs/react/Access_Konva_Nodes.html
Then use Konva mathods for cache.

from react-konva.

Thanks so far. Interestingly, caching the background image (Din A4 paper) made the performance even worse and the image wasn't shown on my iPad anymore.

I guess I will try to measure the performance in a next step.. Currently it feels like whenever I tried to optimize something, I got worse.

Do you think, that a whiteboard app with free drawing on multiple Din A4 size pages is possible with Konva and React in general?

from react-konva.

Without knowing the details, I can't say whether it is really possible or not. Sounds like yes, but may depend on some use cases.

from react-konva.

Nice I followed your advise with caching:

useEffect(() = >{
  if (objects.length > 0) {
    const obj = objects[objects.length - 1];
    const objRef = obj.ref;

    if (obj.type === "line") {
      let minX = obj.points[0];
      let minY = obj.points[1];
      let maxX = obj.points[0];
      let maxY = obj.points[1];

      for (let i = 2; i < obj.points.length; i += 2) {
        const x = obj.points[i];
        const y = obj.points[i + 1];

        if (x < minX) minX = x;
        if (y < minY) minY = y;
        if (x > maxX) maxX = x;
        if (y > maxY) maxY = y;
      }

      objRef.current.cache({
        width: maxX - minX + (obj.strokeWidth * 2),
        height: maxY - minY + (obj.strokeWidth * 2),
        pixelRatio: 1
      });
    } else {
      objRef.current.cache({
        pixelRatio: 1
      });
    }
  }
},
[objects]);

For now it seems to work. I had a big problem with memory exceeding on an iPad. But since I cache every line individually and calculate how big it is, it is better.

Is there a way to know how much space is left in the cache? Do you possibly know some improvement for the cache?

I could imagine something like: clear cache when a line is not visible and don't event render it and re-cache it again when it is visible again, but I couldn't make it work yet.

from react-konva.