使用drawImage時不同的畫布大小（canvas，0,0）

Question

我有2個canvas元素，這些元素從父div中獲取高度。

var canvas = document.getElementById("canvas"); 
var canvas2 = document.getElementById("canvas2"); 
canvas.width = canvas.width; 
canvas.height = canvas.height; 
canvas2.width = canvas2.width; 
canvas2.height = canvas2.height; 

畫布元素的大小在DOM中是正確的。現在我用drawImage（）函數得到一個問題。

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var canvas2 = document.getElementById("canvas2"); 
var ctx2 = canvas2.getContext("2d"); 
for(var i = 0;i<len;i++){ 
    !magic drawings! 
} 
ctx2.drawImage(canvas, 0, 0); 

問題是它複製第一個畫布到canvas2。當第一個畫布的高度爲150px時，它僅在第二個畫布上應用150px的畫布繪製，該高度爲200px。

任何想法或建議？

編輯

確定一個可能的解決方案，但它不是漂亮。

ctx2.drawImage(canvas, 0, 0, canvas2.width, canvas2.height); 

因此畫布被調整大小。由於寬度不會改變，因此高度更高。所以不是完美的解決方案。

Answer 1

使用畫布上下文的縮放參數，以避免拉伸

var scaleFactor=canvas2.height/canvas.height; 

ctx2.drawImage(canvas,0,0,canvas.width,canvas.height, 
         0,0,canvas.width*scaleFactor,canvas.height*scaleFactor);