Разница между «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), очевидно:

я думал, что нечто неправильно с СИЗ е мой холст, поэтому я удалил суффикс «точки» от ширины и высоты собственности холста и всех других неизменным:

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

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

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

Answer 1

the spec См:

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

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