无法设置画布元素的大小？

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

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

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

Answer 2

使用HTML属性：

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

如果您需要动态设置这些属性，getContext()之前分配width和height属性：

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