How to add a html5 CANVAS within a DIV
Question
I'm using the below code to generate a canvas . At the moment it adds the canvas element to the body , how can I get it to add it to a div named "divGameStage", which is not nested within any other elements, except body .
EDIT: I've tried the first suggestion, but no canvas is appearing, full code is as follows:
<head>
<meta charset="utf-8">
<title>Game Stage</title>
<script type="text/javascript">
function loadCanvas(id) {
var canvas = document.createElement('canvas');
div = document.getElementByID(id);
canvas.id = "CursorLayer";
canvas.width = 1224;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
div.appendChild(canvas)
}
</script>
</head>
<body>
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<div id="divControls"></div>
<div id="divGameStage"></div>
<script type="text/javascript">
loadCanvas(divGameStage);
</script>
</body>
</html>
4 answers
solution1
17 ACCPTED 2012-08-06 07:52:26
Just try this code and will work for you surely:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Game Stage</title>
<script type="text/javascript">
function loadCanvas(id) {
var canvas = document.createElement('canvas');
div = document.getElementById(id);
canvas.id = "CursorLayer";
canvas.width = 1224;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
div.appendChild(canvas)
}
</script>
</head>
<body>
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<div id="divControls"></div>
<div id="divGameStage"></div>
<script type="text/javascript">
loadCanvas("divGameStage");
</script>
</body>
</html>
Some things keep in mind:
- Error No 1 is missing quotes in loadCanvas("divGameStage");
- Error No 2 is syntax error div = document.getElementById(id); "..ID(id)" was in your code.
If then also it doesnt work then i am sure that you are testing it on Internet Explorer (specially < IE9)
If these is the case, FYI IE9 and above supports canvas no other lesser version supports canvas
Cheers!!!
solution2
4 2012-08-05 12:38:38
You just have to append it to your <div> instead of the body:
<script type="text/javascript">
function loadCanvas(id) {
var canvas = document.createElement('canvas'),
div = document.getElementById(id);
canvas.id = "canvGameStage";
canvas.width = 1000;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
div.appendChild(canvas);
}
/* ... */
loadCanvas("divGameStage");
</script>
Quite simply:-)
solution3
3 2012-08-05 12:42:58
<script type="text/javascript">
function loadCanvas() {
var canvas = document.createElement('canvas');
canvas.id = "canvGameStage";
canvas.width = 1000;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
var div = document.createElement("div");
div.className = "divGameStage";
div.appendChild(canvas);
document.body.appendChild(div)
}
</script>
solution4
1 2012-08-05 19:11:27
The only problem here is this:
loadCanvas(divGameStage);
Wrap divGameStage in quotes:
loadCanvas("divGameStage");
Since it needs to be a string to be run through getElementById .
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.