title: html5 add multiple canvas... use appendchild
body: <p>i want to add multiple canvas, but I am repeatedly fail .....
  i want to add canvas image, it must be added linearly in one  tag
  because i have to set fixed framework that is A4 size.<br>
  and i must use appendchild ..... 
  here is my code...  please i need help.... please ......please.... </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type = "text/javascript" charset = "utf-8" &gt;&lt;/script&gt;
  var origin_canvas = document.getElementById('original_img');
  var original_context = origin_canvas.getContext('2d');
  var fileopen = document.getElementById('fileopen');
  var add_img = document.getElementById('filter');
  
  var div_filed = document.getElementById('canvas_pack');
  var canvasElements = new Array(); 
  var c_context = new Array();
  // i want to add multiple canvas and canvas_filed
  
        for(var i = 0; i&lt;100; i++){
              canvasElements = document.createElement("canvas");
              div_Filed.appendChild(canvasElements);
              c_context.push(canvasElements.getContext('2d'));
          }
          
   add_img.onclick = function (event) {
    drawImage(origin_canvas);
   }
  
   fileopen.onchange = function (event) {
                  console.log(this.value);
                  /* Loading */
                  var tgt = event.target || window.event.srcElement;
                  var files = tgt.files;
                  // FileReader support
                  if (FileReader &amp;&amp; files &amp;&amp; files.length) {
                      var fr = new FileReader();
                      var image_load_tag = new Image();
                      image_load_tag.onload = function () {
                          drawImage(image_load_tag);
                      }
                      fr.onload = function () {
                          image_load_tag.src = fr.result;
                      }
                      fr.readAsDataURL(files[0]);
                      delete image_load_tag;
                      delete fr;
                  }
                  else {}
              }
  
  function drawImage(imageObj) {
              console.log('drawImage');
             origin_canvas.width = imageObj.width;
              origin_canvas.height = imageObj.height;
              original_context.drawImage(imageObj, 0, 0);
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;add multiple canvas &lt;/title&gt;
  &lt;/head&gt;
      &lt;style&gt;
          .div-a{
              display: inline-block;
              width: 210mm;
              height: 297mm;
          }
      &lt;/style&gt;
  
  &lt;body&gt;
   &lt;div class = div-a id = "canvas_pack"&gt;
   &lt;canvas id = "original_img&gt;&lt;/canvas&gt;
   
   // this location is where the canvas has to be added ....
  
   &lt;/div&gt;
                 
                 </code></pre>
  </div>
  </div>
  </p>