Sometimes, we want to resize HTML5 canvas to fit window with JavaScript.
In this article, we’ll look at how to resize HTML5 canvas to fit window with JavaScript.
How to resize HTML5 canvas to fit window with JavaScript?
To resize HTML5 canvas to fit window with JavaScript, we set the width and height properties.
For instance, we write
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
to select the canvas with querySelector.
Then we get its context with getContext.
Next, we set its width and height to the window width and height, which we get from the innerWidth and innerHeight properties.
Conclusion
To resize HTML5 canvas to fit window with JavaScript, we set the width and height properties.
