画布的HTML属性（宽度，高度）独立更改

Question

I have some script on JS, it change width and height of canvas element:

 function RefreshSizes (canvas) {
        var temp_width = 320;
        var temp_height = 240;

        document.getElementById(canvas).setAttribute('width', temp_width);
        document.getElementById(canvas).setAttribute('height', temp_height);
    }

this functions calling right after canvas initializing. It works fine on Chrome.

But in FireFox 49 I see that:

What could it be?

UPD#1 Tested code of BukkitmanPlays MCPE

UPD#2 Full CSS for canvas:

    element {
        width: 320px;
        height: 240px;
    }
    .canvas {
        border: 3px solid #E0E0E0;
        z-index: 0;
        position: relative;
    }
    html {
        font: 10px/10px arial;
    }

Answer 1

some code on one browser isn't the same on another browser, so in this case, what I would do:

function RefreshSizes (canv) {
    var temp_width = 320;
    var temp_height = 240;

    var canvas = canv;
    canvas.width = temp_width;
    canvas.height = temp_height;
}

I'm sure this will work