Are all <canvas> tag dimensions in pixels?
- by Simon Omega
Are all 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 they are measuring 32 pixels.
Now back to the Original Java Code...
If I inspect the 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...
