loading an image into canvas is relitively easy. For simplicity I am going to load an image from the same directory level as the html file, feel free to change this to whatever you like.




<script type="text/javascript">// <![CDATA[
 window.onload = function(){

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

 // vars here
 var myImage = new Image();
 myImage.src = "image1.jpg";

myImage.onload = function()
 {
 //log message in console
 console.log("image loaded");
// draw the image in the centre of the canvas
 context.drawImage(myImage, canvas.width/2 - myImage.width/2, canvas.height/2 - myImage.height/2 ) 

 }

};

// ]]></script>


<canvas id="myCanvas" width="640" height="480"></canvas>