无法设置canvas元素的大小？

Question

我正在尝试绘制一个500 x 1000像素的<canvas>元素，但我的浏览器只会渲染一个300 x 150像素的元素。

这是我的代码：

var c=document.getElementById('canvas');
var ctx=c.getContext('2d');
ctx.fillStyle='black';  
ctx.fillRect(0,0,500,1000);

JSFiddle：http://jsfiddle.net/R8cxH/

我不明白这一点，因为外部body元素宽于300像素。

我做错了什么？

Answer 1

使用HTML属性：

<canvas id="canvas" width="500" height="1000"></canvas>

如果您需要动态设置这些属性，请在width之前指定height和getContext()属性：

var c = document.getElementById('canvas');
c.width = 500;
c.height = 1000;
var ctx = c.getContext('2d');

Answer 2

您需要设置新创建的画布的宽度和高度

c.width = 500;
c.height = 1000;