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>

Possible duplicate of [Add canvas to a page with javascript](http://stackoverflow.com/questions/9152224/add-canvas-to-a-page-with-javascript) — Vadzim, Jun 04 '16 at 13:06

score 17 · Accepted Answer · edited Feb 23 '20 at 15:04

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

Thanks for the tips, I obviously wasn't paying attention to my quotes and case! — aSystemOverload, Aug 25 '12 at 15:01

score 4 · Answer 2 · answered Aug 05 '12 at 12:38

4

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

answered Aug 05 '12 at 12:38

m-r-r

555
6
15

1

Thanks, but no canvas has appeared, I've pasted the updated code, am I calling loadCanvas in the wrong place or is it something else? – aSystemOverload Aug 05 '12 at 19:08
when you say not appearing have you checked the source? I'm pretty sure the canvas wont be visible to you until you draw on it in this instance. – Stuart Aug 05 '12 at 19:27

score 3 · Answer 3 · answered Aug 05 '12 at 12:42

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

score 1 · Answer 4 · answered Aug 05 '12 at 19:11

1

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.

answered Aug 05 '12 at 19:11

Purag

16,941
4
54
75

How to add a html5 CANVAS within a DIV

4 Answers4