用JavaScript显示图像

Question

I am trying to make a clip art image appear inside of a canvas in JavaScript and for some reason the clip art is not appearing on top of the rectangle I am drawing as a border for it and I have no clue how to make them both appear. The rectangle is showing up just not the picture. Am I not allowed to put both in a canvas? Do I need to layer two canvases? Am I just coding this incorrectly? Any help would be much appreciated.

<canvas id = "myCanvas" width = "400" height="400"></canvas>
<script>
var r = document.getElementById("myCanvas");
var rec = r.getContext("2d");
rec.strokeStyle = "black";
rec.rect(20,20,300,300);
var img = new Image();
img.onload = function()
{
    rec.drawImage(img,30,30);
}
img.src = "monkey-face-cartoon.png";
rec.stroke();
function monkeyMove(){
}
</script>

Answer 1

It looks like the image isn't being loaded properly, and therefor img.onload isn't being called. I swapped out the src for a data-uri and it rendered just fine. Where abouts are you getting the image from?