title: Can't access canvas element in iframe
body: <p>I got a iframe and I want to select a canvas element in this iframe. But it doesn't work. I'm using the following code.</p>
  
  <p>This is my iframe</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="canvasdiv" width="300" height="300"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is my parent page</p>
  
  <pre><code>&lt;iframe name="iframe" id="iframe" frameborder="0" width="325" height="325" src="..."&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>With javascript I add a canvas with some properties. For example the id.</p>
  
  <pre><code>canvas.node.id = "canvas";
  </code></pre>
  
  <p>In my parent page I got the following javascript.</p>
  
  <pre><code>var iframe = document.getElementById("iframe");
  alert(iframe);
  var iframe_canvas = iframe.contentDocument || iframe.contentWindow.document;
  alert(iframe_canvas);
  var canvas = iframe_canvas.getElementById("canvas");
  alert(canvas);
  </code></pre>
  
  <p>Result:</p>
  
  <pre><code>iframe = iframe element
  iframe_canvas = html element
  canvas = null
  </code></pre>
  
  <p>Does somebody know why I can't access the canvas element? =(</p>