放射状のグリッドマップが大きくズームされているのはなぜですか？

Question

私のテストページで[リンクが削除されました]は、正方形の右上隅から放射状の一連の線があります（左側の垂直の長方形は無関係なものに使用されるサイドバーです）。右上を極座標の原点として使用すると、行はtheta = piから3pi/2になります。

しかし、キャンバスはズームインされているように見えます。私（そして私の友人）は、左上にズームインされているように、大きくてぼやけた線がいくつか見えます。スケーリングは起こっていません。CanvasオブジェクトのjQueryプラグインであるjCanvasを使用しています。私が座標を出力すると、それらを紙の上にプロットするときに、それらの座標が整列しているはずです。

何が問題なのですか？

これは私のコードです：どうやらビルトインを使用してcanvasの幅と高さを設定

<script> 

var gradations_theta, theta, this_x1, this_y1, this_x2, this_y2, start_r, end_r; 
gradations_theta = 24; 
start_r = 20; // 20 pixels from center of galaxy 
end_r = 800; // 800 pixels from center of galaxy (to corners west and south of center) 

$(function() { 
    for (theta = Math.PI; theta <= (Math.PI * 3/2); theta += (Math.PI/(gradations_theta * 2))) { 

     this_x1 = Math.floor(800 + (start_r * Math.cos(theta))); 
     this_y1 = Math.floor(Math.abs(start_r * Math.sin(theta))); 
     this_x2 = Math.floor(800 + (end_r * Math.cos(theta))); 
     this_y2 = Math.floor(Math.abs(end_r * Math.sin(theta))); 

     $('#space-map') 
     .restoreCanvas() 
     .drawLine({ 
      strokeStyle: '#fff', 
      strokeWidth: 1, 
      x1: this_x1, 
      y1: this_y1, 
      x2: this_x2, 
      y2: this_y2 
     }); 

    } 
}); 

</script> 

Answer 1

はwidthとheightは、この問題を解決した属性。 Canvas is stretched when using CSS but normal with "width"/"height" properties