Question

Are all canvas tag dimensions in pixels?

I am asking because I understood them to be.
But my math is broken or I am just not grasping something here.
I have been doing python mostly and just jumped back into Java Scripting.
If I am just doing something stupid let me know.
For a game I am writing, I wanted to have a blocky 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);
}

To me this should produce a series of 640w by 10h pixel bars. In Google Chrome and Fire Fox I get 15 bars. To me that means ( 480 / 15 ) is 32 pixel high bars.
So 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. Other than the fact that the first code snippet has shades of blue rendering in non-visible portions of the canvas they are measuring 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 original code to png at 300 x 150 (which is 15 rows of 10). Is it some how being resized to 640 x 480 by the CSS instead of being set to a true 640 x 480?

Why, how, what? O_o I confused…

Answer 1

I believe you just need to set the width and height of your canvas when you create it in the html. Those values control the size of the coordinate space in your canvas and the defaults 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
to control the size of the coordinate
space: width and height. These
attributes, when specified, must have
values that are valid non-negative
integers. The rules for parsing
non-negative integers must be used to
obtain their numeric values. If an
attribute is missing, or if parsing
its value returns an error, then the
default value must be used instead.
The width attribute defaults to 300,
and the height attribute defaults to
150.