Canvasは四角形を描くことはできませんか？

Question

<canvas id="c" style="border: solid 1px black; width: 300px; height: 300px;"></canvas> 
    <script type="text/javascript"> 
     var canvas = document.getElementById("c"), 
     ctx = canvas.getContext("2d"); 
     ctx.fillRect(0, 0, 50, 50); 
    </script> 

結果に：

フィドル：キャンバス の属性がhttp://jsfiddle.net/Fedor/xZGUj/3/

これをチェックして、それはあなたが私が推測する幅と高さを置く必要がありますすることができhttp://jsfiddle.net/wong2/xZGUj/

Answer 1

問題はキャンバスのスタイル属性であればhttp://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width

を見つけることができます。

style属性を使用してキャンバスのサイズを設定すると、スケーリングの問題が発生します。 これは、canvas要素がデフォルトサイズを持つために発生します。 CSSを使用してサイズを設定すると、size =>スケーリングの問題とは異なります。警告することができます（canvas.height）、あなたはそれを設定していなくても、値を持っていることがわかります。次に変更すると

それは動作します：

<canvas id="c" width="100" height="100" style="border: solid 1px black;"></canvas> 
<script type="text/javascript"> 
    var canvas = document.getElementById("c"), 
    ctx = canvas.getContext("2d"); 
    ctx.fillRect(0, 0, 50, 50); 
</script> 

の

Answer 2

、幅と高さを属性座標系の洞察キャンバスを初期化する。 CSSのプロパティは、キャンバスのサイズのみを制限します。したがって、widthとheihgtを指定しないと、デフォルトでwidth = 300とheight = 150の座標系が得られます。あなたはここにこの情報を使用すると、CSS 150であなたのフィドル置く高さに... squreが:) squreされます