Canvas Emptied but Reappears

问题

I have seen several solutions on this issue but have not found one yet that works for my situation. I have a chart being made with chart.js which uses canvas to display. I have a function that is supposed to clear the canvas so that I can then redraw the chart with different x variables. The function works initially but as soon as I start to hover on my cleared canvas the old contents reappear. More specifically it seems to reappear if I am hovering over on of the previous data points.

Here is the function:

function empty(){
    canvas = document.getElementById("loansChart");
    const context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
}

EDIT

If a canvas contained items that had hover initiated function items, do those items still exist (just invisible) in the canvas?

回答1:

You should use the chart.js functions for updating and clearing charts rather than the ones for the html canvas. The docs are quite straightforward. https://www.chartjs.org/docs/latest/developers/updates.html

来源：https://stackoverflow.com/questions/57962123/canvas-emptied-but-reappears