координаты контекста Canvas не соответствуют

Question

Я пытаюсь нарисовать на холсте html5, и следующий код должен дать мне диагональную линию слева направо сверху вниз. Однако я не получаю ожидаемого результата. Есть ли какие-либо преобразования, необходимые для контекста? HTML

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

JS

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();

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

Answer 1

jsFiddle demo

Странно, но это правда. Элемент Canvas W / H должен иметь (не только *) значение inline вроде:

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

Поместите остальные в таблицу стилей CSS:

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

• Для лучшего понимания:
  Значения W / H элемента Canvas по умолчанию: 300x150, но если вы измените эти значения в своей таблице стилей, они фактически растянут ваши визуализации холста, как это было бы для любого другого изображения.

• Еще один способ изменить ваш W / H - использовать JS, например:

  canvas [0] .width = 700;
  холст [0]. высота = 100;

Демо