I'm really confused about this one.

This is about saving html canvas drawings to the database. I have two variables:

let canvasesData = [];
let savedCanvasesData = [];

canvasesData contains the new data and savedCanvasesData contains the data which has been saved on the server. The first time this code runs every thing works fine, but when it runs for the second time (or more) then things get strange.

$(document).on('click', '#saveDrawings', function(){
    console.log(canvasesData); // This is identical to canvasesData after the update (3 lines down,) why?
    console.log(savedCanvasesData); // This is identical to canvasesData at the second run, how is this possible?
    canvasesData[currentCanvas] = {'img': canvas.toDataURL('image/jpeg', 1), 'txt': $('#drawingDescr').val()};
    console.log(canvasesData);
    if(!arrayIsEqual(canvasesData, savedCanvasesData)){
        //This doesn't run the second time, because the arrays are identical, which shouldn't be so.
        let toSave = canvasesData;
        data = {'imgs': toSave};
        $.post('/APIUrl', data, function(response){
            // The only explanation I have is that this is the first thing that runs
            //  when the button is pressed. But when I console.log() the following line
            //  it tells me it runs only after the response, like it should.
            savedCanvasesData = canvasesData;
        });
    }
});

Nowhere else do I use the savedCanvasesData array. I do use the canvasesData array in other places but these function are not called in this process, so it can't be changed. I'm really confused as to how this can be updated before the onClick code even runs.