Question

128

How to add a html5 CANVAS within a DIV

rated 0 times [ 129] [ 1] / answers: 1 / hits: 64352 / 12 Years ago, sun, august 5, 2012, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

myakylas

Add To Favorites

Follow

Total Points: 66

Total Questions: 85

Total Answers: 95

Location: Guadeloupe

Member since Sat, Aug 22, 2020

4 Years ago

myakylas questions

1 NestJS, how and where to build response DTOs

Thu, Apr 28, 22, 00:00, 2 Years ago

1 How to render a popup by calling a function?

Thu, Apr 8, 21, 00:00, 3 Years ago

1 Make useEffect hook run before rendering the component

Sat, Sep 19, 20, 00:00, 4 Years ago

1 Angular Material sorting, Cannot set property 'sort' of undefined

Thu, Aug 8, 19, 00:00, 5 Years ago

1 Background Color of Material UI Snackbar not being overridden

Wed, May 29, 19, 00:00, 5 Years ago

View All

answered 12 Years ago joseluispauld · Accepted Answer

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