Bubble sort visualization help in js

Question

i am very new to js, i previously learned python

var lineArray = [];

const sort = (arr) =>{
    let temp;
    for (var x = 0; x <= arr.length; x++) {
        if (arr[x] > arr[x+1]) {
            temp = arr[x];
            arr[x] = arr[x+1];
            arr[x+1] = temp;
            
        }
    }
}

const draw = () =>{
    const canvas = document.querySelector('#myCanvas');
    const width = canvas.width;
    
    ctx = canvas.getContext('2d');
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'white';
    
    if (!canvas.getContext){
        return ;
    }
    
    for(var x = 1; x <= width; x++){
        let rand = Math.random();
        
        ctx.beginPath();
        ctx.moveTo(x,rand * 250);
        ctx.lineTo(x,250);
        ctx.stroke();
        
        lineArray.push(rand);
    }
}

draw();

I am trying to get a hang of the language by making a bubble sort visualizer in js but i seem to have hit a dead end lol, here is my code

I got how to make the lines but i have no idea how to sort them

Oh and in lineArray.push(rand); the i wasn't sure what values to add to the array so i did that...no idea if that works but i will go with it :)

any tips or any solutions are appreciated