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.

Answer 1

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 

Answer 2

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