How to make HTML5 canvas 100% width and height of the viewport with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published.