title: how to render offscreen canvas properly
body: <p>I'm trying to create a basic example of offscreen rendering canvas but I'm error in js "cannot read property of context". actually my idea is to create a demo like I saw in <a href="https://yalantis.com/" rel="noreferrer">https://yalantis.com/</a> I want to create my name initial. If there is any better idea to achieve this then please enlighten me. 
  Thanks here is my basic attempt before the actual implementation :) </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Off Screen Canvas&lt;/title&gt;
  &lt;script&gt;
      function createOffscreenCanvas() {
          var offScreenCanvas= document.createElement('canvas');
          offScreenCanvas.width= '1360px';
          offScreenCanvas.height= '400px';
          var context= offScreenCanvas.getContext("2d");
          context.fillRect(10,10,200,200);
      }
      function copyToOnScreen(offScreenCanvas) {
          var onScreenContext=document.getElementById('onScreen').getContext('2d');
          var offScreenContext=offScreenCanvas.getContext('2d');
          var image=offScreenCanvas.getImageData(10,10,200,200);
          onScreenContext.putImageData(image,0,0);
      }
      function main() {
          copyToOnScreen(createOffscreenCanvas());
      }
  &lt;/script&gt;
  &lt;style&gt;
      #onScreen {
          width:1360px;
          height: 400px;
      }
  &lt;/style&gt;
  &lt;/head&gt;  
   &lt;body onload="main()"&gt;
   &lt;canvas id="onScreen"&gt;&lt;/canvas&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>