未在畫布上呈現的旋轉圖像

Question

代碼中包含的圖像未呈現在畫布上。如果我使用任何其他風景圖像，它會很好地工作。我究竟做錯了什麼？

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

 
var image = document.createElement("img"); 
 

 
image.onload = function(){ 
 
    canvas.width = image.width; 
 
    canvas.height = image.height; 
 
    ctx.drawImage(image,0,0); 
 
} 
 

 
image.src = "http://org.school66.group.us.west.2.s3.amazonaws.com/church.jpg" 
 
// this image works perfectly fine 
 
// http://org.school66.group.us.west.2.s3.amazonaws.com/bookclub.jpg

<canvas id="canvas"></canvas><br> 
 
<button id="clockwise">Rotate right</button> 
 
<button id="counterclockwise">Rotate left</button>

Answer 1

這將是這樣的：

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

var img = new Image(); 
img.onload = function() { 
    canvas.width = image.width; 
    canvas.height = image.height; 
    ctx.drawImage(img,0,0); 
}; 
img.src = "http://org.school66.group.us.west.2.s3.amazonaws.com/church.jpg";