CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
Daishisan
Daishisan

Reputation: 290

Canvas resizes on width but not height

When I create a canvas such as:

<!DOCTYPE html>
<html>

<body>
<canvas style="background-color: #FF0000; width: 100%; height: 100%></canvas>
</body>

</html>

I've found that if I make the window small enough, the width will be scaled but not the height. That is, the canvas resizes proportionally but only enough so that the width fits in completely --- the height may need scrolling.

I would like instead to have the entire canvas resized proportionally so that it fits all on the page (both horizontally and vertically). Moreover, I would like to do this in a way such that the width and height attributes of the canvas aren't altered (though it's okay if the clientWidth/clientHeight is).

Upvotes: 0

Views: 699

Answers (3)

Blindman67
Blindman67

Reputation: 54128

Fullscreen canvas

Canvas display size

The canvas is a special case in regard to sizing. It has a resolution the defines the number of pixels that it contains, and it has a display size that defines how many pixels it occupies on the page.

Canvas display size is set via its style properties.

canvas.style.width = "100%";  // does not change the resolution
canvas.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 then
canvas height = 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;
    }
    
    <canvas id="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 function
function resizeCan(){
    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;
    }
    <canvas id="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.

Upvotes: 1

KuboK
KuboK

Reputation: 68

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>

Upvotes: 0

Robin Knaapen
Robin Knaapen

Reputation: 606

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

Upvotes: 0

Related Questions