图像显示在JavaScript中

Question

我正在尝试使剪贴画图像出现在JavaScript中的画布内部，并且由于某种原因剪贴画未出现在矩形的顶部我正在绘制为边框，并且我没有线索如何让他们都出现。矩形显示不是图片。我不允许把两个都放在画布上吗？我需要分两层画布吗？我只是错误地编码了吗？任何帮助将非常感激。

<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

看起来像没有被正确加载，并为此img.onload不会被调用。我换出了一个data-uri的src，它表现得很好。你从哪里得到图像？