Разница между "100" и "100px" в HTML

Question

я собирался создать холст html5 размером 500px * 500px:

<canvas id="stone" width="500px" height="500px"></canvas>

и обведите линию от (70px, 70px) до (140px, 140px):

var canvas = document.getElementById( "stone" );
var context;

try {
    context = canvas.getContext( "2d" );
} catch( e ) {
    $( "support" ).html( "HTML5 canvas is not supported by your browser." );
}

context.beginPath();
context.moveTo( 70, 70 );
context.lineTo( 140, 140 );
context.stroke();

но мне дали квадрат с линией, которая не начиналась с (70px, 70px), очевидно:

Я подумал, что с размером моего холста что-то не так, поэтому я удалил суффикс "px" из свойства width и height холста и оставил остальные без изменений:

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

и я получил прямоугольник с правильной линией на этот раз:

В чем разница между "500" и "500px"? Как я могу сделать этот холст нужного размера?

Answer 1

См. Спецификация :

Элемент canvas имеет два атрибута для управления размером координатного пространства: width и height. Эти атрибуты, если они указаны, должны иметь значения, которые действительные неотрицательные целые числа . Правила для анализа неотрицательных целых чисел должны использоваться для получения их числовых значений. Если атрибут отсутствует или анализ его значения возвращает ошибку, то вместо этого должно использоваться значение по умолчанию. Атрибут width по умолчанию равен 300, а атрибут height по умолчанию равен 150.

Длина в HTML всегда без единиц измерения. Единицы длины являются частью CSS и поэтому не отображаются в HTML (за исключением style).