All sizes of canvas tags in pixels?

Question

Are all canvas tag sizes in pixels?

I ask because I understood them. But my math is broken, or I just don’t understand anything. I mainly deal with python and just jumped back to Java Scripting.
If I'm just doing something stupid, let me know.
For the game I am writing, I wanted to have a block gradient.
I have the following:

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.restore(); // Restore Settings to Save Point (Removing Styles, etc...) } function main () { var targetcontext = document.getElementById("main").getContext("2d"); testDraw(targetcontext); } 

For me, this should produce a series of 640 watts per 10 inch pixel panels. In Google Chrome and Fire Fox, I get 15 bars. For me, this means that (480/15) is 32 pixel bars.
Therefore, I change the code to:

 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.restore(); // Restore Settings to Save Point (Removing Styles, etc...) } 

And get a true 32 pixel height result for comparison. Besides the fact that the first code fragment has shades of blue in the invisible parts of the canvas, they occupy 32 pixels.

---

Now back to the original Java code ...
If I inspect the canvas tag in Chrome, it reports 640 x 480.
If I inspect it in Fire Fox, it reports 640 x 480.
BUT! Fire Fox exports the source code to png at 300 x 150 (which is 15 lines of 10 each). Is there some way to resize to 640 x 480 using CSS instead of being set to true 640 x 480?

Why, how, what? O_o I was embarrassed ...

Answer 1

I believe that you just need to set the width and height of your canvas when you create it in html. These values ​​control the size of the coordinate space on your canvas, and the default values ​​are 300 x 150.

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

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

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