¿Están todas las dimensiones de la label canvas en píxeles?

¿Están todas las dimensiones de la label canvas en píxeles?

Estoy preguntando porque entendí que lo eran.
Pero mi matemática está rota o simplemente no estoy captando algo aquí.
He estado haciendo python en su mayoría y simplemente volví a Java Scripting.
Si solo estoy haciendo algo estúpido, házmelo saber.
Para un juego que estoy escribiendo, quería tener un gradiente de bloques.
Tengo lo siguiente:

HTML

 <canvas id="heir"></canvas> 

CSS

 @media screen { body { font-size: 12pt } /* Game Rendering Space */ canvas { width: 640px; height: 480px; border-style: solid; border-width: 1px; } } 

JavaScript (Shortened)

 function testDraw ( thecontext ) { var myblue = 255; thecontext.save(); // Save All Settings (Before this Function was called) for (var i = 0; i < 480; i = i + 10 ) { if (myblue.toString(16).length == 1) { thecontext.fillStyle = "#00000" + myblue.toString(16); } else { thecontext.fillStyle = "#0000" + myblue.toString(16); } thecontext.fillRect(0, i, 640, 10); myblue = myblue - 2; }; thecontext.restre(); // Restore Settings to Save Point (Removing Styles, etc...) } function main () { var targetcontext = document.getElementById(“main”).getContext("2d"); testDraw(targetcontext); } 

Para mí esto debería producir una serie de barras de píxeles de 640w por 10h. En Google Chrome y Fire Fox obtengo 15 barras. Para mí eso significa que (480/15) son barras de 32 píxeles de alto.
Entonces cambio el código a:

 function testDraw ( thecontext ) { var myblue = 255; thecontext.save(); // Save All Settings (Before this Function was called) for (var i = 0; i < 16; i++ ) { if (myblue.toString(16).length == 1) { thecontext.fillStyle = "#00000" + myblue.toString(16); } else { thecontext.fillStyle = "#0000" + myblue.toString(16); } thecontext.fillRect(0, (i * 10), 640, 10); myblue = myblue - 10; }; thecontext.restre(); // Restore Settings to Save Point (Removing Styles, etc...) } 

Y obtenga un resultado real de 32 píxeles de altura para comparar. Además del hecho de que el primer fragment de código tiene sombras de representación azul en partes no visibles del canvas, mide 32 píxeles.


Ahora volvamos al código original de Java …
Si inspecciono la label canvas en Chrome, informa 640 x 480.
Si lo inspecciono en Fire Fox, informa 640 x 480.
¡PERO! Fire Fox exporta el código original a png a 300 x 150 (que son 15 filas de 10). ¿Se trata de cómo el tamaño de 640 x 480 cambia el CSS en lugar de establecerse en un verdadero 640 x 480?

¿Por qué, cómo, qué? O_o confundí …

Creo que solo necesita establecer el ancho y la altura de su canvas cuando lo crea en el html. Esos valores controlan el tamaño del espacio de coorderadas en su canvas y los valores pnetworkingeterminados son 300 x 150.

 <canvas id="heir" width="640" height="480"></canvas> 

De http://dev.w3.org/html5/spec/Overview.html#canvas

El elemento canvas tiene dos attributes para controlar el tamaño del espacio de coorderadas: ancho y alto. Estos attributes, cuando se especifiquen, deben tener valores que sean integers válidos no negativos. Las reglas para analizar integers no negativos se deben usar para get sus valores numéricos. Si falta un atributo, o si al analizar su valor devuelve un error, se debe usar el valor pnetworkingeterminado en su lugar. El atributo width está pnetworkingeterminado en 300, y el atributo height está pnetworkingeterminado en 150.