Skip to content Skip to sidebar Skip to footer
Home / Canvas / Html / Html5 Canvas / Javascript

Canvas Resizes On Width But Not Height

Post a Comment
When I create a canvas such as: 
canvas.style.width = "100%";  // does not change the resolutioncanvas.style.height = "100%";

Canvas resolution

To set the resolution you set the canvas width and height properties.

canvas.width = 1000; // if the style width and height not set thencanvasheight=800;  // the computed style will match. If not// then setting the resolution will// not effect display size (in most cases.)

Note that canvas sizing style properties required unit type '%', 'px', ... while canvas size properties do not and will assume the values are pixels ('px") if you just set them as a number.

Low quality due to bad sizing.

If you only set the style width and height you end up stretching out the default canvas resolution of 300 by 150 pixels and the resulting image is blurred due to bilinear filtering.

Example of default canvas resolution and style only sizing.

var ctx = myCan.getContext("2d");
ctx.font = "18px arial";
ctx.textAlign = "center";
ctx.fillText("Low res & blury",myCan.width/2,myCan.height/2);
ctx.font = "12px arial";
ctx.fillText("Canvas resolution default " + myCan.width + "px by " + myCan.height + "px",myCan.width/2,myCan.height/2 + 18);
html, body {
        min-height: 100%;
    }
    canvas {
        width : 100%;
        height : 100%;
        background:#aaa;
    }
    
<canvasid="myCan"></canvas>

Fullscreen (page) canvas

To correctly size the canvas in both display size and resolution (both of which should match for the best result (not stretching) it is best done via javascript.

If I am doing a full screen canvas I prefer to position it via absolute positioning. 

canvas.style.position = "absolute"canvas.style.top = "0px";canvas.style.left = "0px";

And I do not set the canvas display size by setting style width ad height, I allow that browser to compute that for me once I set the canvas resolution

Example correctly setting a full screen canvas using javascript.

myCan.style.position = "absolute"
myCan.style.top = "0px";
myCan.style.left = "0px";
// when page has loaded size the canvas resolution to fit the display
myCan.width = window.innerWidth; 
myCan.height = window.innerHeight; 
var ctx = myCan.getContext("2d");
ctx.font = "18px arial";
ctx.textAlign = "center";
ctx.fillText("Canvas resolution matches page resolution",myCan.width/2,myCan.height/2);
ctx.font = "12px arial";
ctx.fillText("Canvas resolution " + myCan.width + "px by " + myCan.height + "px",myCan.width/2,myCan.height/2 + 18);
ctx.textAlign = "right";
ctx.fillText("Resize by clicking [full page]",myCan.width -10,20);
// resize functionfunctionresizeCan(){
    myCan.width = window.innerWidth; 
    myCan.height = window.innerHeight;    
    ctx.font = "18px arial";
    ctx.textAlign = "center";
    ctx.fillText("Resized canvas resolution matches page resolution",myCan.width/2,myCan.height/2);
    ctx.font = "12px arial";
    ctx.fillText("Canvas resolution " + myCan.width + "px by " + myCan.height + "px",myCan.width/2,myCan.height/2 + 18);
}
window.addEventListener("resize",resizeCan);
html, body {
        min-height: 100%;
    }
    canvas {
        background:#aaa;
    }
<canvasid="myCan"></canvas>

Note that you need to resize the canvas when the page resizes by listening to the window resize. The above example will do that for you.

Solution 2:

Body by default doesn't have height. You could do.

html, body {
    min-height: 100%;
}

This will give the body a height so the canvas can grow the that size

Solution 3:

You could add position:fixed; and left:0; top:0; to your style. This will keep your canvas on full screen.

<!DOCTYPE html><html><body><canvas></canvas><style>canvas{
    background-color: #FF0000; 
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
}    
</style></body></html>

Post a Comment for "Canvas Resizes On Width But Not Height"