title: One canvas to interact, three to display
body: <p>i'm creating a browser game which is meant to be played as a hologram.
  The screen should be displaying something like this:
  <a href="https://www.youtube.com/watch?v=Y60mfBvXCj8" rel="nofollow noreferrer">https://www.youtube.com/watch?v=Y60mfBvXCj8</a></p>
  
  <p>Therefore i thought i have to create 4 canvas (no problem), but three of them should only display whats happening on the first.
  I've tried to let it draw an Image of the canvas and let it display to the other canvas. </p>
  
  <p>Any help would be appreciated!</p>
  
  <p>The game is created with Box2D. </p>
  
  <p>edit:</p>
  
  <p>i want the space ship to be drawn in every canvas, but only controlled in one.</p>
  
  <p>my code: <a href="http://s000.tinyupload.com/index.php?file_id=68837773176112789787" rel="nofollow noreferrer">http://s000.tinyupload.com/index.php?file_id=68837773176112789787</a></p>
  
  <p>the problem is, that its only displaying on one canvas!</p>
  
  <p>what i've put in the HTML:</p>
  
  <pre><code>&lt;canvas id="canvas1" width="500" height="500"&gt;&lt;/canvas&gt;
  &lt;canvas id="canvas2"  width="500" height="500"&gt;&lt;/canvas&gt;
  &lt;canvas id="canvas3"  width="500" height="500"&gt;&lt;/canvas&gt;
  &lt;canvas id="canvas4"  width="500" height="500"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>what is meant to print it to the others:</p>
  
  <p>JS</p>
  
  <pre><code>var sourceCtx, destinationCtx, imageData;
  
  //get the context of each canvas
  sourceCtx = canvas2.getContext('2d');
  canvas2Ctx = canvas3.getContext('2d');
  
  //copy the data
  imageData = sourceCtx.getImageData(0, 0, canvas2.width - 1, canvas2.height - 1);
  
  //apply the image data
  canvas3Ctx.putImageData(imageData, 0, 0);
  
  //done
  </code></pre>