title: How to copy content from hidden canvas to visible canvas?
body: <p>I am having some difficulty copying a canvas from my buffer canvas to the canvas on my page.  Thus far I have built a Render object, a Level object, and I have my main game loop (currently just a launch function).</p>
  
  <p>I am able to write to the buffer canvas in the Render object just fine (if I add a document.body.append() statement the canvas successfully appends to the document with the necessary content) but I cannot copy from the buffer canvas to my main canvas.  See below for a snippet of my code:</p>
  
  <pre><code>function Renderer(bufferWidth, bufferHeight) {
      var c=document.createElement('canvas');
      var ctx=c.getContext('2d');
      c.width=bufferWidth;
      c.height=bufferHeight;
  
      this.getBufferContext = function() { return ctx; };
      this.getBufferElement = function() { return c; };
  
      this.drawToCanvas = function(canvasCtx) { 
          canvasCtx.drawImage(c,0,0);
      };
  }
  
  
  var c = document.getElementById('mycanvas');
  var ctx = c.getContext('2d');
  
  var render = new Renderer(c.width, c.height);   
  var level1 = new Level('images/imagequality.png');
  
  level1.Draw(render.getBufferContext());
  render.drawToCanvas(ctx);
  </code></pre>
  
  <p>Note that Renderer is in a separate file and is loaded using the script tags in my HTML page. </p>
  
  <p>As mentioned earlier, the drawToCanvas() function doesn't appear to successfully copy data from one canvas to another.  Appending my source canvas confirms that it contains the expected data. </p>
  
  <p>edit: I have listed my level code below.</p>
  
  <pre><code>function Level(mapname) {
      var map=new Image();
      map.src=mapname;
  
      this.Draw = function(renderer) {
          map.onload = function() { renderer.drawImage(map,0,0); };
      };
  }
  </code></pre>