views:

160

answers:

1

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...

+3  A: 

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.

William
Note that you need an end tag as well.
Ms2ger
Thanks ms2ger, wasn't aware of that.
William
So it would seem that the CSS is actually stretching my canvas to 640 x 480 and not sizing it. I am so used to doing all measurements and placements through CSS I never thought to try setting it directly. I will test this and let you know if that is the case. ^_^
Simon Omega
I can't seem to edit my comment. But the verdict is:Not setting the height and width attributes of the tag it's self results in a 300 x 150 canvas. The CSS just stretches it to 640 x 480 giving a distortion.Thank you. +Up +BestAnswer
Simon Omega
I think that all clients will automatically size it to the dimensions you set in the canvas tag, but doubling up with the CSS won't hurt, just two places to change if you ever want to.
William