Sometimes, we want to make HTML5 canvas 100% width and height of the viewport with CSS.
In this article, we’ll look at how to make HTML5 canvas 100% width and height of the viewport with CSS.
How to make HTML5 canvas 100% width and height of the viewport with CSS?
To make HTML5 canvas 100% width and height of the viewport with CSS, we use viewport units.
For instance, we write
canvas {
height: 100vh;
width: 100vw;
display: block;
}
to set the width to 100vw and the height to 100vh.
vw is the percentage of the viewport width and vh is the percentage of the viewport height.
Conclusion
To make HTML5 canvas 100% width and height of the viewport with CSS, we use viewport units.
