Не могу нарисовать карту из двумерного массива. Как отрисовать её на canvas?

Question

[MANCHERA CHAN]

Не работает код

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');


// global info
let GI = {
    // tiles size
    TS: 50,
}

let map = [
    [0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0],
    [0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0],
    [0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0],
    [0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0],
    [0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0],
    [0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0],
    [0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0],
    [0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0],
    [0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0],
    [0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0],
]

function SetCanvasSize(e){
    ctx.canvas.width = e.innerWidth
    ctx.canvas.height = e.innerHeight
}

function drowMap(){
    for(let x = 0; x < map.length; x++){
        for(let y = 0; y < map[x].length; y++){
            ctx.clearRect(0 , 0 , ctx.canvas.width , ctx.canvas.height)

            ctx.fillStyle = '#ff0000'
            ctx.fillRect(x * GI.TS , y * GI.TS , GI.TS , GI.TS)
            
        }
    }
}

drowMap()

SetCanvasSize(window)

window.addEventListener('resize' , ()=>{
    drowMap()
    
    SetCanvasSize(window)
})

Answer 1

[Александр]

Сначала меняете размеры, потом рисуете.

Comments

[MANCHERA CHAN]

Спасибо.

Я думал что то не так с fillRect а оказывается ответ проще.

Answer 2

[Сергей Соколов]

Ошибка в том, что при отрисовке каждой ячейки стираете ВСЮ канву:

ctx.clearRect(0 , 0 , ctx.canvas.width , ctx.canvas.height)

Рабочий пример:

Comments

[MANCHERA CHAN]

спасибо я это уже понял