make canvas as wide and as high as parent
JavascriptCssHtmlCanvasJavascript Problem Overview
i would like to make a rectangular canvas to simulate a progress bar but it seems when i set the width and height of a canvas to 100%, it doesn't really make it as high and as wide as parent
please see example below
http://jsfiddle.net/PQS3A/
Is it even possible to make non-squared canvas? I don't want to hardcode the height and width of canvas, because it should change dynamically when viewed in bigger or smaller screen, including mobile devices
Javascript Solutions
Solution 1 - Javascript
Here's a working example fixing the problems:
http://jsfiddle.net/PQS3A/7/
You had several problems with your example:
- A
<div>
does not haveheight
orwidth
attributes. You need to set those through CSS. - Even if the div were sized correctly, it was using the default
position:static
, which means that it is NOT the positioning parent of any children. If you want the canvas to be the same size as the div, you must set the div toposition:relative
(orabsolute
orfixed
). - The
width
andheight
attributes on a Canvas specify the number of pixels of data to draw to (like the actual pixels in an image), and are separate from the display size of the canvas. These attributes must be set to integers.
The example linked to above uses CSS to set the div size and make it a positioned parent. It creates a JS function (shown below) to both set a canvas to be the same display size as its positioned parent, and then adjusts the internal width
and height
properties so that is has the same number of pixels as it shows.
var canvas = document.querySelector('canvas');
fitToContainer(canvas);
function fitToContainer(canvas){
// Make it visually fill the positioned parent
canvas.style.width ='100%';
canvas.style.height='100%';
// ...then set the internal size to match
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
Solution 2 - Javascript
Use the width
and height
attributes of the canvas if you want it to actually be as big as the parent element. You can set them using JQuery.
$(document).ready(function() {
var canvas = document.getElementById("theCanvas");
canvas.width = $("#parent").width();
canvas.height = $("#parent").height();
});
If you do not know JQuery, then use the following Javascript:
var canvas = document.getElementById("theCanvas");
var parent = document.getElementById("parent");
canvas.width = parent.offsetWidth;
canvas.height = parent.offsetHeight;
If you use the css
height and width attributes, style="width:100%; height:100%;"
, then you are just stretching the canvas. This will cause everything you draw on the canvas to look stretched.
JSFiddle for JQuery solution.
JSFiddle for Javascript solution.
Solution 3 - Javascript
Use CSS properties instead of attributes on the tags:
<div style="background-color:blue;width:140px;height:20px">
<canvas style="background-color: red;width:100%;height:100%">
</canvas>
</div>ā