HTML5 Canvas Full Size
Question
I am trying to make html5 canvas full size through following code. I know there is other methods by using javascript but What's wrong in this?
<head>
<title>Canvas_dot</title>
<meta charset="utf-8">
<style>
#mycanvas{
background-color : #d3d3d3;
}
</style>
</head>
<body >
<canvas id=myCanvas width=window.innerWidth height=window.innerHeight ></canvas>
</body>
5 answers
solution1
1 ACCPTED 2015-06-01 11:37:20
With javascript, do this:
var canvas = document.getElementById("myCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight
solution2
0 2015-06-01 11:45:11
If you just need a solution, it can be actually made this way
#mycanvas{
background-color : #d3d3d3;
width : 100%;
height : 100%;
}
solution3
0 2015-06-01 12:04:32
The problem with your code is that window.innerWidth is actually Javascript. Javascript calls need a script tag around them for being recognized as Javascript.
solution4
0 2015-06-01 12:14:37
A lot simpler and cleaner solution without JS. Just use:
body{
width:100%;
height:100%;
}
#mycanvas{
width:100%;
height:100%;
background-color : #d3d3d3;
}
solution5
0
There are several reason why this won't work:
JavaScript was made to manipulate DOM. For that to work the DOM need to exist before the element can be found. In this example the JavaScript code (see below) tries to manipulate a DOM element that does not exist yet (itself, ie. the canvas element) as the code exists inside the definition of the DOM element.
JavaScript is not recognized without defining
<script>tags and tags cannot be inside another tag, so it's not possible to run the code in the attribute section of a tag (ie.<tag <invalidtag ..> >)Anything after = is interpreted as a value to the key. The "window.*" is simply interpreted as a string, which for canvas in this case is an invalid value for width/height.
The closest you get to a valid setup to approximate this way of defining the tag is to use inline document.write(). In the HTML:
<script>
document.write("<canvas width=" + window.innerWidth +
" height=" + window.innerHeight + "></canvas");
</script>
However, due to its lack of maintainability, readability, security etc. it's recommended to define the size using the DOM element. If you need an initial state of the canvas filling the window you could do:
#myCanvas {
position: fixed;
left: 0;
top: 0;
width:100%; /* make sure html and body has width/height defined 100% */
height:100%;
}
This will however only update the canvas element , not its bitmap which is still 300x150 (unless a initial size was defined). When the script can run, update the bitmap size in JavaScript:
updateCanvasSize();
window.onresize = updateCanvasSize;
// assuming var canvas = ...element.. is already obtained
function updateCanvasSize() {
var rect = canvas.getBoundingClientRect(); // get pixel size of element
canvas.width = rect.width; // update bitmap which now match 1:1
canvas.height = rect.height;
// redraw content here as resizing the bitmap clears it
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.