# Resizing the HTML Canvas Element
by [kirupa](https://www.kirupa.com/me/index.htm) | 24 May 2011
[Have questions? Discuss this HTML5 tutorial with others on the forums.](https://www.kirupa.com/forum/showthread.php?371142-Tutorial-Resizing-the-HTML-Canvas-Element)
With CSS’s unstoppable powers, you can specify the width and height of pretty much any element in HTML. For the most part, all of this works as expected. The notable exception to this behavior is the `canvas` element.
In this short article, I will first describe the problems that occur when you set the size of a `canvas` element using CSS. Finally, I will wrap up by discussing how to properly set the `canvas` element's size.
## Why CSS Doesn't Work
The best way to see why CSS does not work in this case is to look at an example. What we want to do is display the following image inside a `canvas` element whose size is set to 350x250 using CSS:
Our CSS and HTML look as follows:
```js
```
#### Note
For the sake of simplicity, I have omitted the JavaScript that actually displays that image inside our canvas.
When you run this example, here is what you will see:
[ things look a bit skewed... ]
Notice that the canvas itself is properly sized at 350 pixels by 250 pixels. What isn't sized properly is the content inside the canvas. Let's look at how to fix this.
## Properly Resizing your Canvas
The fix for this is pretty straightforward. Don’t use CSS for specifying your canvas’s size. Instead, set the ` width` and `height` attribute values on your canvas element directly:
```js
```
Once you do this, both your canvas as well as the contents inside it will be sized properly:
[ happy days are back again! ]
A lot of times, the size of your canvas element will not be fixed. You may want to adjust its size based on some interaction, resize operation, etc. For these cases, you will need to set your `canvas`'s size programmatically.
The following code snippet explains how you can do that:
```js
var myCanvas = document.querySelector("#myCanvas");
myCanvas.width = 350;
myCanvas.height = 250;
```
I am basically [ getting a reference](https://www.kirupa.com/html5/referencing_html_elements_via_javascript.htm) to our canvas element and setting the width and height attributes. This is basically the JavaScript version of the HTML that I modified earlier.
If you want to run your canvas in fullscreen mode and ensure it always takes up all of the available space, the code for making sure it is sized (and resized) correctly is:
```js
window.addEventListener("resize", resizeCanvas, false);
function resizeCanvas(e) {
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = document.documentElement.clientWidth;
myCanvas.height = document.documentElement.clientHeight;
}
```
You can learn more about how to calculate your viewport size by looking at the [ Viewport, Device, and Document Size](https://www.kirupa.com/html5/viewport_device_document_size.htm) tutorial.
## Why the Weird Behavior?
By now, you are probably wondering why there is this weird behavior when you set a `canvas`'s size via CSS and when you set it directly on the element. The reason has to do with what exactly gets sized in both of those cases.
When you specify the size of the `canvas`'s `width` and ` height` attributes, you are specifying the size of the `canvas`'s ***rendered area***. When the size is specified via CSS, you ***scale the rendered area*** to match the defined CSS size. It is this discrepancy that results in the skewing that you see on your `canvas`.
## Conclusion
There you have it – a very quick and simple article that shows you how to deal with resizing the `canvas` element in a way that preserves the aspect ratio of the ` canvas`'s contents. If your opinion of the `canvas` element diminished a little bit from reading this, then I have succeeded even beyond what I had hoped for.