Drawing an image to canvas

This was based on the udacity tutorial: https://www.udacity.com/course/viewer#!/c-cs255/l-66584787/m-66516811

by Matt Rummler

HTML

<body>
    <canvas id="gameMap" width="600" height="800">
      
    </canvas>
    <script src="gameMain.js"></script>
  </body>

CSS

html
{
  width: 100%;
  height: 100%;
}
canvas
{
  width: 90%;
  height: 90%;
}

JavaScript

var canvas = null;
var onImageLoad =function(image,ctx)
{
  console.log('The image '+image+' has been successfully loaded');
//  alert('the following is information about the image. The source of the image: '+image.src+' Also, here is the image object: '+image);
  ctx.drawImage(image, 100, 100);//, 50, 50);
/*
  ctx.beginPath();
  ctx.moveTo(200,296);
  ctx.lineTo(360,236);
  ctx.lineTo(373,286);
  ctx.lineTo(470,215);
  ctx.stroke();
//*/
};
setup = function(canvasIdentifier)
{
  //canvas
  canvasIdentifier=canvasIdentifier || 'gameMap';
  var canvas=document.getElementById(canvasIdentifier);
  var context=canvas.getContext('2d');
  canvas.width=window.innerWidth;
  canvas.height=window.innerHeight;
  //now image objects
  //NOTE: Eventually create some kind of factory type of interaction where game sprites are created including their representative image object
  var ralphy=new Image(100,100);//(100, 100);
  var imageSource='http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';//'./ralphybot.png';
  ralphy.src=imageSource;//'./ralphybot.png';
  ralphy.onload=onImageLoad(ralphy,context);
};
setup();