Why do I not see image on canvas?

<canvas id="mainC" width="100" height="100" style="border:1px solid #000000;"></canvas>
<script>	

var canvas = document.getElementById("mainC");
var ctx = canvas.getContext("2d");
	
ctx.canvas.width  = window.innerWidth;  
ctx.canvas.height = window.innerHeight;

var wall = new Image(); 
wall.src = "woodblock.jpg";
ctx.drawImage(wall, 0, 0,56,56);

</script>

You could do something like:

var wall = new Image(); 
wall.src = "woodblock.jpg";
wall.onload = drawImage;

function drawImage() {
  var canvas = document.getElementById("mainC");
  var ctx = canvas.getContext("2d");
  ctx.canvas.width  = window.innerWidth;  
  ctx.canvas.height = window.innerHeight;
  ctx.drawImage(this, 0, 0, 56, 56);
}

The key is you need to wait until the image has loaded to be able to draw it in the canvas.

What if I want to draw same image many times to different coordinates?