Create HTML5 Canvas programmatically

Question

I have the following HTML code snippets

<body onload="main()" >
    ...
    <canvas id="myId" class="myClass"></canvas>
    ...
</body>

It works as expected. I can display the output correctly.

I then remove

<canvas id="myId" class="myClass"></canvas>

Because I want to create it programmatically with the following JavaScript code snippet

var canvas = document.createElement("canvas");
canvas.className  = "myClass";
canvas.id = "myId";

Unfortunately, it didn't work. I cannot display anything with this.

I am wondering if I miss something. Any help is appreciated. Thanks in advance for your help.

Sophie Alpert · Accepted Answer · 2011-01-22 03:23:28Z

26

You need to insert the new <canvas> element into the DOM. To put it at the end of the body, use:

document.body.appendChild(canvas);

with the code that creates it. (If you want to put it inside a different element, use that instead of document.body.)

answered Jan 22, 2011 at 3:23

Sophie Alpert

144k37 gold badges229 silver badges244 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Ball · Accepted Answer · 2011-01-22 03:23:28Z

14

You need to actually attach the canvas to the document. Before you do so, it's just a detached element that the browser does not render.

var canvas = /* ... */;
/* ... */
document.getElementsByTagName('body')[0].appendChild(canvas);

answered Jan 22, 2011 at 3:23

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

@Ben, @Matt -- Both solutions work. Voted for both of them already. Thanks a lot!

@pion: you're welcome. I just noticed that our answers were posted within 1 second of each other...