HTML 5畫布上的線條出現失真

Question

我試圖做一個網格在我的500米像素X 500米像素的畫布：

<canvas id="area" style="width: 500px; height: 500px;"></canvas> 


var canvas = document.getElementById('area'); 
    var context = canvas.getContext('2d'); 

for (var x = 0.5; x < 500; x += 10) { 
    context.moveTo(x, 0); 
    context.lineTo(x, 500); 
} 

for (var y = 0.5; y < 500; y += 10) { 
    context.moveTo(0, y); 
    context.lineTo(500, y); 
} 

context.strokeStyle = "#eee"; 
context.stroke(); 

代碼看起來正確的給我，但由於某種原因，它的現身長和像素化：

http://jsfiddle.net/DK4m7/1/

有人會知道爲什麼會發生這種情況嗎？使用CSS設置畫布大小

Answer 1

避免，做代替：

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

使用CSS將只伸展帆布位圖的當前大小，其缺省值爲350×150像素。您需要使用寬度和高度屬性專門定義位圖大小。

Modified fiddle