# Creating a Fullscreen Grid
by [kirupa](https://www.kirupa.com/me/index.htm) | filed under [Working with the Canvas](https://www.kirupa.com/canvas/index.htm)
Learn how to take a simple grid and modify it to take up all available space in the browser. As always, some surprises await!
We have [our perfect grid](https://www.kirupa.com/canvas/drawing_perfect_grid.htm), but it could be a bit more perfect. Our grid currently has a fixed size and is centered on our screen. What would truly make it perfect is if it was fullscreen and took up all of the available space in the browser:
In the following sections, we’ll learn how to take a grid and add the appropriate CSS and JavaScript (yes, JavaScript!) to have our grid take up all available space.
Onwards!
## Starting Point
Instead of starting a grid from scratch, we are going to build upon [the perfect grid](https://www.kirupa.com/canvas/drawing_perfect_grid.htm) we created earlier. Create a new document and copy/paste the following starter HTML, CSS, and JavaScript into it:
```js
A Perfect Grid
```
Once you have added this content into a new HTML document, you should see something that looks as follows when you preview it in your browser:
Take a few moments to look at the full code and understand what is going on. The [Drawing a Perfect Grid tutorial](https://www.kirupa.com/canvas/drawing_perfect_grid.htm) can help you if you are stuck at any point.
## Making our Grid Full Screen
With our starting point all set, we are going to go through the various stages of making our grid take up all available space.
### Making the Canvas Take up all Available Space
For our first step, let's have our `canvas` element take up all available space. Let's jump to the CSS, and add the following highlighted lines to our **#myCanvas** style rule:
```css
#myCanvas {
outline: 2px solid #333;
width: 100vw;
height: 100vh;
}
```
By using viewport units for the width and height, a value of 100 for both means that we take ***up all available space*** across the entirety of our browser window.
Next, because our web pages often have a default margin and padding, we want to override that and set it to 0. Because all of the existing content inside the body style rule isn't necessary for creating a fullscreen canvas, replace it entirely with the following:
```css
body {
margin: 0;
padding: 0;
}
```
The full CSS at this moment will look as follows:
```css
#myCanvas {
outline: 2px solid #333;
width: 100vw;
height: 100vh;
}
body {
margin: 0;
padding: 0;
}
```
If we preview our page right now, we will see that our grid properly takes up all available space. Does this mean we are done? Not quite...
### Handling Resizes
While our grid takes up all available space when we load our example, notice what happens **when we resize our browser window by making it larger**:
Our grid doesn't grow or shrink to accommodate the changing size of our viewport (aka browser window). To fix this, we'll need to add some JavaScript that listens to the window resize event and:
1. Sets the new width and height as a CSS style on our canvas element
1. Sets the new width and height on the canvas element directly
1. Redraws our grid based on how much space is now available
To do all of this, add the following code ***below all of ***our existing code inside our `script` element:
```js
window.addEventListener("resize", () => {
requestAnimationFrame(() => {
myCanvas.style.width = window.innerWidth + "px";
myCanvas.style.height = window.innerHeight + "px";
accountForDPI();
drawGrid(1, 20, 20, "#000");
});
});
```
Once you have added this code at the bottom of your existing code, preview your example again and try resizing your browser window. This time, our grid will properly resize and appear fullscreen:
Now, we can better say that we have our grid set up to appear in fullscreen. Before we wrap all of this up, let's explain what the code we added does.
First, we'll talk about the most interesting two lines:
```js
window.addEventListener("resize", () => {
requestAnimationFrame(() => {
myCanvas.style.width = window.innerWidth + "px";
myCanvas.style.height = window.innerHeight + "px";
accountForDPI();
drawGrid(1, 20, 20, "#000");
});
});
```
In the first line, we listen to the **resize** event that fires each time our browser window is resized. Because this event has the potential to be very chatty, [we need to throttle it](https://www.kirupa.com/javascript/throttling_chatty_events.htm) so it does not run unnecessarily. That is where the second line with the `requestAnimationFrame` call comes in.
By using `requestAnimationFrame`, we ensure the code doesn't immediately execute each time our **resize** event fires. Instead, `requestAnimationFrame` schedules the function to run before the next browser repaint. This helps to synchronize the code with the browser's rendering cycle, resulting in fewer unnecessary redraws. This becomes especially important when we expect the browser window to be resized frequently.
Next up are the actual changes we make to our grid:
```js
window.addEventListener("resize", () => {
requestAnimationFrame(() => {
myCanvas.style.width = window.innerWidth + "px";
myCanvas.style.height = window.innerHeight + "px";
accountForDPI();
drawGrid(1, 20, 20, "#000");
});
});
```
Resizing a canvas element requires both updating the ***visual appearance*** of the canvas (handled by CSS) and the ***actual rendered size*** (handled by the width and height properties directly on the canvas). The first two highlighted lines update the CSS to the resized size of our window. The call to `accountForDPI` handles setting the rendered size of the canvas.
The last thing we do is call `drawGrid`, and this ensures we draw the appropriate rows and columns based on how much space is now available.
## Conclusion
Our full code after making all of the changes in the above sections will look as follows:
```html
A Perfect Grid
```
If we hadn't had to worry about resizing our viewport, this entire tutorial could have been just a few lines covering our CSS changes. Because we want to be thorough and account for browser resizes, we added the extra code to (performantly) ensure our canvas takes up all of the available space even as the available space changes.