Różnica pomiędzy "100" i "100px" html

Question

miałem utworzyć HTML5 płótno wielkości 500px * 500px:

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

i skok linii od (70 pikseli, 70 pikseli) do (140px , 140px) na nim:

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

ale dano mi kwadrat z linii, która nie została zaczynają się (70 pikseli, 70 pikseli) oczywiście:

myślałem było latków źle z siz e mojego płótnie, więc usunąłem „px” przyrostek od szerokości i wysokości majątku płótnie i przechowywane innych zmian:

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

i mam prostokąt z prawej umieszczonej linii tym razem:

jaka jest różnica między "500" a "500px"? jak mogę zrobić to płótno we właściwym rozmiarze?

Answer 1

Patrz the spec:

Element canvas ma dwie cechy do kontroli rozmiaru układzie współrzędnych: width i height. Atrybuty te, jeśli zostały określone, muszą mieć wartości, które są ważne ważne non-negative integers. Reguły parsowania nieujemnych liczb całkowitych muszą być użyte do uzyskania ich wartości numerycznych. Jeśli brakuje atrybutu lub jeśli analizowanie jego wartości zwraca błąd, należy zamiast tego użyć wartości domyślnej. Szerokość przypisywać domyślne do 300, a wysokość przypisywać domyślne do 150.

Długości w HTML są zawsze jednostka mniej. Jednostki długości są częścią CSS i dlatego nie pojawiają się w HTML (z wyjątkiem style).