In my project, X and Y coordinates move like a go-kart race. For that, I drew a track to see what they were running around. However, the problem is that like the points, this loaded track / route will reload and so it will disappear, even though I want it to stay there all the way. Could someone help me?

var myChart;

let canvas = document.getElementById('myChart');

let ctx = canvas.getContext('2d');
    
    function init(){

        myChart = new Chart(ctx, {
    
            type: 'scatter',
    
            data: {
    
                datasets: [{
    
                    label:[datas.nameandgokart[0].username+" - "+datas.nameandgokart[0].gokart_name.substring(4,8)],
                    
                    backgroundColor:["red"],
    
                    data: [],
    
                },]
    
            },
    
            options: {
    
                responsive: false,
    
                aspectRatio: 1,
                
                maintainAspestRatio: true,
    
                scales: {
    
                    xAxes: [{
    
                        gridLines:{
                            color:"rgba(0,0,0,0)"
                        },
                    }]
    
        ,            yAxes: [{
    
                        gridLines:{
                            color:"rgba(0,0,0,0)"
                        },
                    }]
            }
    
        });
        const movements = JSON.parse(localStorage.getItem("Palya"));

    function drawLine(ctx, x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 4;
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
        ctx.closePath();
    }
    for(const movement of movements){
        drawLine(ctx,...movement.from,...movement.to)
    }
    
    }
    init()
})

Here is the drawLine:
[1]: https://i.stack.imgur.com/RP80X.png


The problem is after starting the go-kart on the chart:
[2]: https://i.stack.imgur.com/7Wm4g.png