Resizing the HTML Canvas Element

by kirupa   |   24 May 2011

  Have questions? Discuss this HTML5 tutorial with others on the forums.

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:

square

Our CSS and HTML look as follows:

<!DOCTYPE html>
<html>

<head>
  <style>
    #myCanvas {
      border-width: 1px;
      border-style: solid;
      border-color: Black;
      width: 350px;
      height: 250px;
    }
  </style>
</head>

<body>
  <div id="container">
    <canvas id="myCanvas">

    </canvas>
  </div>

  <script>
    // omitted!
  </script>
</body>

</html>
        

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:

skewed

[ 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:

<!DOCTYPE html>
<html>

<head>
  <style>
    #myCanvas {
      border-width: 1px;
      border-style: solid;
      border-color: Black;
    }
  </style>
</head>

<body>
  <div id="container">
    <canvas id="myCanvas" width=350 height=250>

    </canvas>
  </div>

  <script>
    // omitted!
  </script>
</body>

</html>

Once you do this, both your canvas as well as the contents inside it will be sized properly:

sizing squares 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:

var myCanvas = document.querySelector("#myCanvas");
myCanvas.width = 350;
myCanvas.height = 250;

I am basically getting a reference 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:

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 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.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!