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).
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?