Tutorials
Books
Videos
Forums
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.
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:
<!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>
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.
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:
[ 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.
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.
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.
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
:: Copyright KIRUPA 2024 //--