描画されたイメージがキャンバスにレンダリングされない

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";