I have tried to get this code to work (example from pdiddles03 youtube-tutorial)
Once I run the code on Chrome I only see blank canvas borders. I have html -file and both image files on my desktop, so no sub folders. I have gone through the code multiple times and tried to find where I have gone wrong, but without luck. Should I add somewhere grass.onload = function() AND sand.onload = function() ?

I would appreciate if you could add them or any solution to the code below. I just started learning JS week ago and some advises will go over my head. Best way for me to learn is to see when the actual code has been changed.



Below full code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas Tile Map</title>
<style>
#canvas{
border: 1px solid red;}
</style>
</head>

<body>

<canvas id="canvas" height="400px" width="500px"></canvas>

<script>

var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');


var mapArray=[
[0,0,0,0,1,1,1,0,0,0,0,0,0],
[0,0,0,0,0,1,1,0,0,0,0,0,0],
[0,0,0,0,0,1,1,0,0,0,0,0,0],
[0,0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,0,0,1,1,0,0,0,0,0],
[0,0,0,0,0,0,0,1,1,1,1,0,0]
];

var grass=new Image();
var sand=new Image();



grass.src='grass.png';
sand.src='sand.png';

var posX=0;
var posY=0;


for(var i=0; i < mapArray.length; i++){
for(var j=0; j < mapArray[i].length; j++){

if(mapArray[i][j]==0){
context.drawImage(grass, posX, posY, 32,32);
}
if(mapArray[i][j]==1){
context.drawImage(sand, posX, posY, 32,32);
}
posX+=32;
}
posX=0;
posY+=32;
}

</script>
</body>
</html>