The difference between "100" and "100px" in html

Question

I was going to create an html5 canvas with a size of 500px * 500px:

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

and draw a line from (70px, 70px) to (140px, 140px) on it:

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

but they gave me a square with a line that did not start with (70px, 70px), obviously:

I thought something was wrong with the size of my canvas, so I removed the “px” suffix from the width and height property of the canvas and left the others unchanged:

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

and this time I got a rectangle with the right position:

what's the difference between "500" and "500px"? How can I make this canvas the right size?

Answer 1

See the specification :

The canvas has two attributes for controlling the size of the coordinate space: width and height . These attributes, if specified, must have valid non-negative integers . Rules for analyzing non-negative integers should be used to get their numerical values. If the attribute is missing or parsing its value returns an error, use the default value instead. The default width attribute is 300, and the default height attribute is 150.

HTML length is always less than one. Length units are part of CSS and therefore are not displayed in HTML (except style ).