無法在特定尺寸的畫布上繪製

由於某些原因，如果以下代碼中的第二個畫布的高度超過526像素，則Chrome中不會繪製任何圖案。它工作正常，只要高度< 527，並始終在Firefox中工作。任何人都知道我在做什麼錯了？我對HTML很陌生，如果我錯過了某些東西，我很抱歉。無法在特定尺寸的畫布上繪製

<!doctype html> 
<html> 
    <head> 
<script type="text/javascript"> 

function init() 
{ 
    var canv = document.getElementById("myCanvas"); 
    var ctx = canv.getContext("2d"); 
    ctx.fillStyle = "red"; 
    ctx.fillRect(0, 0, canv.width, canv.height); 
} 

</script> 
<style type="text/css"> 
canvas {border: 1px solid black; } 
</style> 
</head> 
<body onload="init()"> 
<canvas id="mainFrame" width="700" height="700"></canvas> 
<canvas id="myCanvas" width="125" height="527"></canvas> <!-- cannot exceed 
526 ... WHY? --> 
</body> 
</html>

來源

2012-12-31 Peter Lewis

如果您減小第一個畫布的高度並在第二個畫布上設置高度> 526px，會發生什麼情況？我還沒有聽說過任何像素限制，可能是因爲您在視口之外進行了繪畫，因此零件沒有繪製/根本沒有繪製任何東西。 – SaschaM78

更改第一個畫布的高度似乎沒有幫助，但完全刪除它確實可以解決問題 –

我注意到，在您的CSS中添加：#myCanvas {}可修復您的問題。但當然不是一個好的解決方案.. –