Problems using canvas Stroke and filter together

Question

I’m developing an image editor on canvas and it needs to contain filters and a rubber. My problem is: By changing the effect (contrast, saturation and brightness) and after using the rubber, it works. But if I do the opposite, the application of the effects erases the line drawn by the rubber.

I believe the problem is that I use the same context for these changes, but I could not think of any solution.

function to apply the effects:

function changeEfect(event) {
if (event.id === "inputRangeContrast") contrast = event.value
if (event.id === "inputRangeSaturation") saturation = event.value
if (event.id === "inputRangebrightness") brightness = event.value
ctx.filter = 'contrast(' + contrast + '%) saturate(' + saturation + '%) brightness(' + brightness + '%)'
draw(ctx)}

draw function (every time I apply precise effect draw on canvas again):

function draw(context) {
var cropValues = cropInstance.getValue()

context.drawImage(formImage, cropValues.x, cropValues.y, cropValues.width, cropValues.height, 0, 0, canvasWidth, canvasHeight)
}

Functions of rubber:

function eraseControl() {

if (isErase) {
    btnErase.style.backgroundColor = "#000"
    btnErase.style.color = "#FFF"
    isErase = false
    btnErase.classList.remove('active')
} else {
    btnErase.style.backgroundColor = "#FFF"
    btnErase.style.color = "#000"
    isErase = true;
    btnErase.classList.add('active');
}}

canvasPhoto.onmousedown = function (e) {
setMouseCoordinates(e);
if (isErase) {
    isErasingOnCanvas = true;
    mousedown = true;
    ctx.beginPath();
    ctx.moveTo(mouseX, mouseY);
}
};

canvasPhoto.onmousemove = function (e) {
if (mousedown) {
    setMouseCoordinates(e);
    if (isErasingOnCanvas) {
        ctx.strokeStyle = '#FFF';
        ctx.lineWidth = 5;
    }

    ctx.lineTo(mouseX, mouseY);
    ctx.stroke();
}};

canvasPhoto.onmouseup = function (e) {
  mousedown = false;
  setMouseCoordinates(e);};