La diferencia entre "100" y "100 px" en html

Question

estaba a punto de crear un html5 lienzo del tamaño de 500px * 500px:

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

y accidente cerebrovascular una línea a partir de (70 px, 70 píxeles) a (140px , 140px) en él:

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

pero me dieron un cuadrado con la línea que no se inicia al (70 px, 70 píxeles), obviamente:

pensé que había algunas cosas mal con el Tam correo de mi lienzo, así que quité el sufijo "px" de propiedad de ancho y el alto de la lona y mantuvo los demás sin cambios:

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

y me dieron un rectángulo con una línea posicionado bien esta vez:

¿cuál es la diferencia entre "500" y "500px"? ¿Cómo puedo hacer que este lienzo tenga el tamaño correcto?

Answer 1

Ver the spec:

El elemento canvas tiene dos atributos para controlar el tamaño del espacio de coordenadas: width y height. Estos atributos, cuando se especifiquen, deben tener valores válidos non-negative integers. Las reglas para analizar enteros no negativos se deben usar para obtener sus valores numéricos. Si falta un atributo, o si al analizar su valor devuelve un error, se debe usar el valor predeterminado en su lugar. La anchura de atributos por defecto a 300, y la altura de atributos por defecto a 150.

longitudes en HTML son siempre unidad menos. Las unidades de longitud son parte de CSS y, por lo tanto, no aparecen en HTML (excepto en el style).