キャンバスコンテキストの座標が一致しません

Question

私はhtml5キャンバスに描画しようとしています。次のコードは左上から右下に対角線を与えます。しかし、私は期待した結果を得られません。コンテキストに必要な変換はありますか？ HTML

<canvas id="myCanvas" style="margin-left:auto; margin-right: 
    auto;width:700px;height:100px;border:1px solid grey"> 
</canvas> 

JS

http://jsfiddle.net/neilghosh/DvjAP/2/

var canvas = $("#myCanvas"); 
var pen = canvas[0].getContext("2d");  
pen.strokeStyle = "#000000"; pen.lineWidth = "2";  
pen.beginPath(); pen.moveTo(700, 100); pen.lineTo(0,0); 
pen.stroke(); 

Answer 1

jsFiddle demo

奇妙なしかし、真。あなたのCSSスタイルシートで休憩を入れ

<canvas id="myCanvas" width="700" height="100"></canvas> 

：
：よりよく理解するために

#myCanvas{ 
     margin-left:auto; 
     margin-right: auto; 
     border:1px solid grey 
    } 

• をH/Wキャンバス要素は次のようにインラインを設定する（だけではなく*）持っています キャンバス要素のW/H値は、デフォルトでは300x150ですが、実際にキャンバスのレンダリングを伸ばすスタイルシート内の値を他の画像と同様に変更すると、

• あなたWを変更するもう1つの方法/ HのようなJSである：

  キャンバス[0] .width = 700;
  キャンバス[0]。高さ= 100;

Demo