canvg canvas getting slower with each edit/ memory usage increase

Question

I have developed a scientific application to measure the area of shapes drawn on a scanned paper using canvg (version 3. something). The application works mostly fine (in Chrome), but gets really slow after a lot of small areas are selected.

var s = canvg('canvas', inp_xmls, {ignoreMouse: true, ignoreAnimation: true});

Each click inside an area performs a bucket fill using the canvg bucket-fill:

var bucket = Bucket(canvas, cfg, event, color);

Subsequently, the image is updated to view the new filled area:

    var lowerimg = svg.image(can.toDataURL());
    console.log(lowerimg)

    lowerimg.node.onload = function () {
        drawDown();

...

function drawDown() {
    inp_xmls = XMLS.serializeToString(svg.node);
    s.loadXml(ctx, inp_xmls);
    s.stop();
}

function undo() {
    var last = svg.last();

    if(svg.index(last) > 1) {
        last.remove();
        drawDown();
        s.draw();
    }
    undoAddArea();
}

Using the memory snapshots I can see 'strings' are increasing in size significantly (and image + #document). And it looks like for each stroke a new 'src' object is added:

The application is available online here: https://limo.mni.thm.de/ Clicking on "Beispiel" on the right open an example slide in the drawing board.

My questions:

• How can I reduce memory usage of the filling/ drawing on the canvas? Is there a function in canvg to 'clear' older layers?
• I need the possibility to 'undo' clicks, so I need to store some of them. How do I access the old images like in the 'undo' function to remove everything older than 5 edits for example?

Answer 1

updating the canvas or SVG after each individual operation consider batching multiple operations together and updating the canvas or SVG less frequently. This can help reduce the overhead of frequent updates and improve overall performance.

Answer 2

When you're working with dynamic visuals like those in a canvas or SVG, it's important to think about how often you're updating them. Instead of making changes to what you see every single time something happens, like a user clicking or dragging, it can be smarter to wait and make those changes all at once, in bigger batches. This approach helps cut down on the work the computer has to do to show those updates, which can make your program run faster and smoother.

Think of it like this: rather than painting a small part of a picture every time someone touches it, you wait until they've made a few changes and then paint everything in one go. This not only speeds things up but also makes it easier to manage and improve your program over time.

To do this, you'll need to set up a system that collects all the changes users make and then applies them together at the right time. It's a bit like gathering up all your ingredients before you start cooking instead of running back and forth to the pantry every time you need something.

By taking this approach, you can make your canvas or SVG updates happen less often but more efficiently, resulting in a better experience for the people using your program.