Foreground image disappears

[penciltea]

I recently implemented this library. I have an image in both the foreground and background. When I drag my mouse or finger through, it drags and clears as expected but the moment I'm no longer pressing down, the whole foreground image disappears, even if I've only cleared a portion of the foreground image.

My current code:

    const scContainer = document.getElementById('js--sc--container')
    const sc = new ScratchCard('#js--sc--container', {
        scratchType: SCRATCH_TYPE.LINE,
        containerWidth: scContainer.offsetWidth,
        containerHeight: 300,
        imageForwardSrc: '//foregroundImage.png',
        imageBackgroundSrc: '//backgroundImage.png',
        clearZoneRadius: 20,
        callback: function () {
        }
    })
   // Init
    sc.init().then(() => {
        sc.canvas.addEventListener('scratch.move', () => {
        let percent = sc.getPercent()
            console.log(percent)
        })
    }).catch((error) => {
        // image not loaded
        alert(error.message);
    });

[Masth0]

Hi, i have forgotten the option "percentToFinish" in the documentation, by default the percent is at 50. It is the scratch percent to achieve before "callback" triggering. Maybe set "percentToFinish:100", in this case every pixels should be cleared before the "callback" triggering.