canvas not drawing images

Question 1

Your image probably hasn't finished loading at the point you are using drawImage:

HTML

Add onload handler in img tag:

<img id="scream" onload="draw()" src="...

Then the function to handle it:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");

function draw() {
    ctx.drawImage(img,10,10);
}

Online demo here

Be aware of that where you place the scripts in your document matters as well.

I would recommend you setting the src attribute in JavaScript as well. That makes it more "safe" to handle the onload (or subscribed event with img.addEventListener('load', ...).

Question 2

you should use the following approach that first let the image loaded then display:

image.onload = function() {
    pic.getContext('2d').drawImage('your image to display', 0,0);
}

Question 3

"If you try to call drawImage() before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded."

example:

var img = new Image();   // Create new img element
img.addEventListener('load', function() {
  // execute drawImage statements here
}, false);
img.src = 'myImage.png'; // Set source path

Source