javascriptを使ってページにキャンバスを追加する

Question

元々キャンバスを持たないページにキャンバスを追加するにはJavaScriptを使用しています。 は、私は次の操作を行うにしようとしています：cがnullであるため、2番目のアラートが定義されていない間、

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

問題は、canvasIDにおける最初の警告（canv.id）の結果です。

誰かが私に間違っていることを教えてもらえますか？

PS：コードはGreasemonkeyの下で動作するように設計されているため、キャンバスとそのIDをHTML自体に追加することは実行可能な選択肢ではありません。

Answer 1

使用DOMに追加するためのNode.appendChild(child)のようなもの：

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 

---

それとも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 canv=document.createElement("canvas"); 
canv.setAttribute("id", "canvasID"); 
document.body.appendChild(canv); 

3行目のようなものがなければ、新しいキャンバスは実際にはページに挿入されません。

Answer 3

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 

...