Possible memory leak issue with setMask

Questions
1

Had a memory leak on a project I am working on and after many test, found out that it was connected to setMask. Found a workaround but wondering if there's already another solution making this not an issue with setMask but rather with me understanding how to use setMask :sweat_smile:.

Here's a test code to replicate. First the code without setMask that seems to stay at the same memory over time:

new Frame(FIT, 1024, 768, dark, light, ready);
function ready() {
    const rect = new Rectangle(400,400,blue,red,10).center();
    const circleMask = new Circle(10).alp(0.5).center();

    // test 1
    circleMask.animate({
        props: {radius:230}
    });
};

Here's with setMask which seems to increase memory over time:

    // test 2
    rect.setMask(circleMask, true);
    circleMask.animate({
        props: {radius:230}
    });

and lastly, here's with setMask and workaround that seems to stay at the same memory over time:

    // test 3
    rect.setMask(circleMask, true);
    circleMask.animate({
        props: {radius:230},
        call: function() {
            rect.setMask(null);
            rect.setMask(circleMask);
        }
    });

My guess is that if a mask is animated, it will leak memory unless cleared using 'null'. I tried stopping the animation, just reassigning setMask after animation, but unless I first set to 'null' it would still leak. Hope this helps and if there's a better solution, please share.

1 Like
2

Ah... that might make sense. When changing the radius, we are redrawing the circle. That is different than setting the scale or the width and height (which usually just sets the scale). So you could animate the scale for instance and that might avoid the problem.

Not totally sure why redrawing the circle with a mask set causes a leak - if it would be on the ZIM side which wraps the CreateJS mask() or on the CreateJS side. The dynamic gets set to true on the mask as soon as you apply an animate. And dynamic masks are a little trickier.

Could you try animating the scale and see if that helps. We will still want to look into the memory leak but this will give us an extra clue. Cheers.

1 Like
3

I tried with scale and it still causes a leak over time. If the animation stops, the leak can be plugged with the 'null' work-around (even if using scale), but if it's a loop-animation, adding the work-around to the loopCall had no effect. So I don't know of a solution for a mask loop-animation. Luckily my project's mask animation doesn't loop. If I think of a possible solution though, I will try it out and share if it works.

4

Okay - we will think on it as well. It sounds like maybe any dynamic mask might have that issue... animate() will automatically turn the mask dynamic as will drag, transform and gesture... wiggle... so perhaps there would be a memory leak if a mask was constantly dragged.