Все ли размеры тегов canvas выражены в пикселях?

Все ли размеры тега canvas выражены в пикселях?

Я спрашиваю, потому что я понял, что они есть.
Но моя математика нарушена, или я просто не улавливаю что-то здесь.
Я занимался в основном python и только что вернулся к написанию сценариев Java.
Если я просто делаю что-то глупое, дайте мне знать.
Для игры, которую я пишу, я хотел бы иметь блочный градиент.
У меня есть следующее:

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);
}

Ко мне это должно произвести серию 640w на 10h пиксельных полос. В Google Chrome и Fire Fox я получаю 15 баров. Для меня это означает, что ( 480/15) - это 32 пиксельных бара.
Поэтому я меняю код на:

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

И получить истинный результат высоты 32 пиксела для сравнения. За исключением того, что первый фрагмент кода имеет оттенки синего рендеринга в невидимых частях холста, они измеряют 32 пикселя.

---

Теперь вернемся к исходному коду Java...
Если я проверю бирку холста в Chrome он сообщает 640 x 480.
Если я проверю его в Fire Fox, он сообщает 640 x 480.
но! Fire Fox экспортирует исходный код в формат png размером 300 x 150 (то есть 15 строк по 10). Является ли это каким-то образом быть измененным до 640 x 480 CSS вместо того, чтобы быть установленным в истинный 640 x 480?

Почему, как, что? О_о я запутался...