title: How to create an Image object from a CanvasPixelArray
body: <p>I have two <code>&lt;canvas&gt;</code> elements in a document.</p>
  
  <p>I want to draw a shape on canvas1, use the <code>ctx1.getImageData()</code> method to copy parts of that shape and animate these parts on canvas2.</p>
  
  <p>I read that using <code>ctx2.putImageData()</code> is slower than using <code>ctx2.drawImage()</code>.</p>
  
  <p>How can i create an <code>Image</code> object from a <code>CanvasPixelArray</code> (which is returned from the <code>ctx1.getImageData()</code> call) in JavaScript?</p>
  
  <p>(Note: I don't want to copy the whole canvas1 but only parts of it. Also, I don't care about old browsers)</p>