How do I push random images from an array onto a canvas using ctx.drawImage?

I want to have a canvas that randomly displays a different animal-head every time the window is refreshed. Thus, I am trying to push a random image from my head array onto my canvas. As you can see below, this is my array.

var heads = ['animals/dog.svg', 'animals/fish.svg', 'animals/monkey.svg'];`

And here is the draw image function that I want the array to randomly push an image to:

ctx.drawImage(img, 60, 50); 

Here is the entirety of my code for context:

var heads = ['animals/dog.svg', 'animals/fish.svg', 'animals/monkey.svg'];

function gethead() { 
var number = Math.floor(Math.random()*heads.length);
document.write('<img src="'+heads[number]+'" />');}

window.onload = function () {
  var img = new Image();
  img.src = 'dog.svg';


  img.onload = function () {
      // CREATE CANVAS CONTEXT.
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      ctx.drawImage(img, 60, 50); 
      // DRAW THE IMAGE TO THE CANVAS.
   }
}

Can anyone explain how I can make this work?