La differenza tra "100" e "100px" in html

Question

ero per creare un html5 tela delle dimensioni di 500px * 500px:

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

e ictus una linea da (70px, 70px) a (140px , 140px) su di esso:

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

ma mi è stato dato un quadrato con la linea che non è stato iniziare a (70px, 70px), ovviamente:

ho pensato che ci fosse quarantina sbagliato con il siz e della mia tela, così ho rimosso il suffisso "px" dalla larghezza e l'altezza di proprietà di tela e mantenuti invariati gli altri:

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

e ho ottenuto un rettangolo con una linea posizionata proprio in questo momento:

qual è la differenza tra "500" e "500px"? come posso rendere questa tela della giusta misura?

Answer 1

Vedere the spec:

L'elemento canvas ha due attributi per controllare la dimensione dello spazio di coordinate width e height. Questi attributi, quando specificato, devono avere valori validi per non-negative integers. Le regole per l'analisi di numeri interi non negativi devono essere utilizzate per ottenere i loro valori numerici. Se manca un attributo o se l'analisi del suo valore restituisce un errore, è necessario utilizzare il valore predefinito. La larghezza attributo default 300, e l'attributo altezza default 150.

Lunghezze in HTML sono sempre unità-meno. Le unità di lunghezza fanno parte dei CSS e quindi non appaiono in HTML (eccetto per style).