HTML5 Javascript畫布旋轉JSFiddle不會運行相同的代碼，結果相同

Question

因此，我對畫布旋轉進行了一些研究，並且遇到了旋轉單個對象的好方法。（Source）我正在理解代碼當我重寫代碼時遇到了這個奇怪的事情。

下面是來自鏈接JSFiddle：

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

var buffer = document.createElement('canvas'); 
buffer.width = buffer.height = 60; 
var bctx = buffer.getContext('2d'); 
bctx.translate(30, 30); 
bctx.rotate(0.5); 
bctx.fillStyle = 'rgb(255, 0, 0)'; 
bctx.fillRect(-15, -15, 30, 30); 

ctx.fillStyle = 'rgb(0, 255, 0)'; 
ctx.fillRect(30, 30, 30, 30); 
ctx.drawImage(buffer, 50, 50); 

和這裏的my JSFiddle：

var myCanvas = document.getElementById("buffer"); 
var context = myCanvas.getContext('2d'); 

var myCanvas1 = document.createElement('canvas'); 
myCanvas1.width = myCanvas1.height = 60; 
var newContext = myCanvas1.getContext('2d'); 
newContext.translate(30, 30); 
newContext.rotate(0.5); 
newContext.fillStyle = 'rgb(255, 0, 0)'; 
newContext.fillRect(-15, -15, 30, 30); 

context.fillStyle = 'rgb(0, 255, 0)'; 
context.fillRect(30, 30, 30, 30); 
context.drawImage(buffer, 50, 50); 

他們是除了我的代碼不旋轉的對象彼此的近精確副本。我一直在看這個代碼幾個小時困惑，我真的很想知道另一個人做對了什麼。

Answer 1

你的問題是這一行：

context.drawImage(buffer, 50, 50); 

使用的原代碼的變量稱爲buffer和分配新的canvas元素到它：

var buffer = document.createElement('canvas'); 

你命名你：

var myCanvas1 = document.createElement('canvas'); 

但稍後會將您的圖片繪製爲不存在的變量buffer