Invisible barrier from old code in javascript

i am making a ray casting game in JavaScript, and everything working, except when i changed the canvas and the map size,There was an invisble barrier i previously had a barrier in this spot, (the green line)

but i have since removed that code and cant find any code that would be making a barrier there. Can some please help, it should be a pretty easy fix i must just be overlooking something, i tried clearing my cache, hard reload, but nothing worked. Here is the code (use wasd to control the player)

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>

    <canvas width="600px" height="400px" id="c"></canvas>
    </body>
    <script>
c = document.getElementById("c");
w = c.width;
h = c.height;
ctx = c.getContext("2d");
var tilesize = 50;
var walls = [];
var rays = [];
rayangle = 1;
lowrayangle = -1;

var player = {
    x: 80,
    y: 80,
    size: 10,
    speed: 0.5,
    dir: 0,
    rot: 0,
    rotSpeed: 0.02,
    rotDir: 0,
}

var map = []




for (y = 0; y < map.length; y++) {
    for (x = 0; x < map[y].length; x++) {

        ctx.fillStyle = ["white", "black"][map[y][x]];
        ctx.fillRect(x * tilesize, y * tilesize, tilesize, tilesize);

        if (map[y][x] == 1) {
            var wallSeg = {
                coordX: x * tilesize,
                coordY: y * tilesize,
                sizeX: tilesize,
                sizeY: 0,
            }
            var wallSeg2 = {
                coordX: x * tilesize,
                coordY: y * tilesize,
                sizeX: 0,
                sizeY: tilesize,
            }
            var wallSeg3 = {
                coordX: x * tilesize,
                coordY: (y * tilesize) + tilesize,
                sizeX: tilesize,
                sizeY: 0,
            }
            var wallSeg4 = {
                coordX: (x * tilesize) + tilesize,
                coordY: y * tilesize,
                sizeX: 0,
                sizeY: tilesize,
            }
            walls.push(wallSeg)
            walls.push(wallSeg2)
            walls.push(wallSeg3)
            walls.push(wallSeg4)

        }
    }
}




function keydown(event) {
    switch (event.keyCode) {
        case 87:
            player.dir = 1;
            break;
        case 83:
            player.dir = -1;
            break;
        case 68:
            player.rotDir = -1;
            break;
        case 65:
            player.rotDir = 1;
            break;
    }

}

function keyup(event) {
    switch (event.keyCode) {
        case 87:
            player.dir = 0;
            break;
        case 83:
            player.dir = 0;
            break;
        case 68:
            player.rotDir = 0;
            break;
        case 65:
            player.rotDir = 0;
            break;
    }

}

window.requestAnimationFrame(update)

function update() {
    var map = []
    var map = [
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,],
    [1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1,],
    [1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1,],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1,],
    [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,],
    [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,],
    [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,]
]
    ctx.clearRect(0, 0, w, h);
    rays = [];
    //move


    rotstep = player.rotSpeed * player.rotDir
    movestep = player.speed * player.dir;
    player.rot += rotstep;
    rayangle += rotstep;
    lowrayangle += rotstep;
    newY = player.y - Math.cos(player.rot) * movestep;
    newX = player.x - Math.sin(player.rot) * movestep;

    leftbY = (player.y - 10) - Math.cos(player.rot) * movestep;
    leftbX = (player.x - 10) - Math.sin(player.rot) * movestep;
    rightbY = (player.y + 10) - Math.cos(player.rot) * movestep;
    rightbX = (player.x + 10) - Math.sin(player.rot) * movestep;



    //borders 
    var leftcol = Math.floor((leftbX) / tilesize)
    var leftrow = Math.floor((leftbY) / tilesize)
    var rightcol = Math.floor((rightbX) / tilesize)
    var rightrow = Math.floor((rightbY) / tilesize)
    if (map[rightcol][rightrow] == 0 && map[leftcol][leftrow] == 0) {
        player.y = newY;
        player.x = newX;
    }

    //map
    for (y = 0; y < map.length; y++) {
        for (x = 0; x < map[y].length; x++) {

            ctx.fillStyle = ["white", "black"][map[y][x]];
            ctx.fillRect(x * tilesize, y * tilesize, tilesize, tilesize);

        }
    }



    //rays  

    for (i = lowrayangle; i < rayangle; i += 0.03) {

        var detail = 0.05;
        var rayLn = 1000;
        var memX;
        var memY;
        for (j = 0; j < rayLn; j += detail) {
            var lY = player.y - Math.cos(i) * j;
            var lX = player.x - Math.sin(i) * j;

            memX = lX;
            memY = lY;

            lX = lX - (lX % tilesize);
            lY = lY - (lY % tilesize);

            if (map[lY / tilesize][lX / tilesize] == 1) {
                break;
            }
        }

        var ray = {
            rayAngle: i,
            newY: memY,
            newX: memX,
            x: player.x,
            y: player.y
        }
        rays.push(ray)
    }
    for (i = 0; i < rays.length; i++) {
        ctx.beginPath();
        ctx.moveTo(rays[i].x, rays[i].y)
        ctx.lineTo(rays[i].newX, rays[i].newY)
        ctx.stroke();
    }
    //player
    markerY = player.y - Math.cos(player.rot) * 30;
    markerX = player.x - Math.sin(player.rot) * 30;
    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.ellipse(player.x, player.y, player.size, player.size, player.rot * (Math.PI / 180), 0, 2 * Math.PI);
    ctx.fill();
    
    window.requestAnimationFrame(update)
}

document.addEventListener("keydown", function(event) {
    keydown(event);
})
document.addEventListener("keyup", function(event) {
    keyup(event);
})
    </script>
</html>

Solution

The rows and columns are switched in the map collision.

if (map[rightrow][rightcol] == 0 && map[leftrow][leftcol] == 0) {
    player.y = newY;
    player.x = newX;
}