Add canvas to a page with javascript

Question

I am trying to use Javascript in order to add a canvas to one page which originally does not have one. I am trying to do the following:

var canv=document.createElement("canvas");
canv.setAttribute("id", "canvasID");
alert(canv.id);
var c=document.getElementById("canvasID");
alert(c.id);

The problem is the the first alert(canv.id) results in canvasID, while the second alert is undefined because c is null.

Can anybody tell me what am I doing wrong?

PS: the code is designed to run under Greasemonkey so adding the canvas and its ID in the HTML itself is not a viable option.

You didn't add `canv` to the DOM. Additionally, you don't have to get the canvas by its ID as it's already referenced in `canv`. — ldiqual, Feb 05 '12 at 19:26
I was trying to get the canvas by id as some sort of "proof" that the canvas was properly added. What do you mean by "You didn't add canv to the DOM." ? — nick2k3, Feb 05 '12 at 19:30
the canvas is just floating in space. It needs to get attached to the DOM, something like `document.body.appendChild(canv);`, will do the trick. — Matt Greer, Feb 05 '12 at 19:33
The DOM is the actual HTML structure of a webpage. You have to add your canvas element to the DOM by using a function like `appendChild()`. For instance, to add it in a `div#myDiv`, you can do write the following code: `document.getElementById('myDiv').appendChild(canv)`. — ldiqual, Feb 05 '12 at 19:34
@Vadzim, I don't know if you're in a spree to edit all [tag:html5-canvas], but this one is not even related to this tag... Also, if you read the current excerpt of the [tag:canvas], you'll notice it should only be referencing the html5-canvas. Related : this [meta-post](http://meta.stackoverflow.com/questions/253790/html5-canvas-tag-should-be-a-synonym-of-the-canvas-tag#comment224407_253790) and [this one](http://meta.stackoverflow.com/q/300003/3702797) — Kaiido, Jun 04 '16 at 13:33

score 67 · Accepted Answer · answered Feb 05 '12 at 19:36

67

Use something like Node.appendChild( child ) for adding it to the DOM:

var canv = document.createElement('canvas');
canv.id = 'someId';

document.body.appendChild(canv); // adds the canvas to the body element
document.getElementById('someBox').appendChild(canv); // adds the canvas to #someBox

Or you can use element.innerHTML:

document.body.innerHTML += '<canvas id="someId"></canvas>'; // the += means we add this to the inner HTML of body
document.getElementById('someBox').innerHTML = '<canvas id="someId"></canvas>'; // replaces the inner HTML of #someBox to a canvas

answered Feb 05 '12 at 19:36

Wouter J

41,455
15
107
112

Thank you that did it! Is there a more elegant way to create an element and add an ID? something like document.createElement('canvas',"canvasID"); ?? – nick2k3 Feb 05 '12 at 19:46
@nick2k3 no, in JS attributes need to set by using . or setAttributes. – Wouter J Feb 05 '12 at 20:20
that's top example is meant to be an "either/or", right? (The top example appends twice.) – ashleedawg Jan 31 '20 at 23:38

score 13 · Answer 2 · answered Jan 27 '14 at 18:55

    var canvas = document.getElementById('canvas'); //finds Original Canvas
    img = document.createElement('img'); 
    img.src = 'images/a.jpg'; //stores image src

    var canv = document.createElement('canvas'); // creates new canvas element
    canv.id = 'canvasdummy'; // gives canvas id
    canv.height = canvas.height; //get original canvas height
    canv.width = canvas.width; // get original canvas width
    document.body.appendChild(canv); // adds the canvas to the body element

    var canvas1 = document.getElementById('canvasdummy'); //find new canvas we created
    var context = canvas1.getContext('2d');

    context.drawImage(img, 0, 0, canvas.width, canvas.height); //draws background image
    context.drawImage(canvas, 0, 0); //draws original canvas on top of background
    cscreen = canvas1.toDataURL(); //generates PNG of newly created canvas
    document.body.removeChild(canv); // removes new canvas

I use this all the time and works great...

Hi, Jeff. Welcome to Stack Overflow. Could you edit your answer to explain why the poster should use your code instead of the code posted in the question (or any of the answers)? There's a lot of "noise" in your answer dealing with creating and drawing images to the canvas, that has nothing to do with the actual question asked. Also, since this question is old and has an accepted answer, your answer should explain something useful that is not explained in the other answers. — Scott Mermelstein, Jan 27 '14 at 19:20
This is the personal answer of Jeff to "how to create a new canvas to extract the image inside a img tag without download it again" but not related with the question. Usually used to get png images or base64 strings to manipulate them. Usually seen on captchas. A quick look here http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage — m3nda, Jun 08 '15 at 23:33

score 6 · Answer 3 · answered Feb 05 '12 at 19:35

6

var canv=document.createElement("canvas");
canv.setAttribute("id", "canvasID");
document.body.appendChild(canv);

Without something like that third line, your new canvas is never actually inserted into the page.

answered Feb 05 '12 at 19:35

Kevin Ennis

14,226
2
43
44

Add canvas to a page with javascript

3 Answers3

Linked