title: Draw two canvas using .innerHTML instead of .append()
body: <p>I want to draw two canvas one after one, why this is not working when i use .innerHTML. On my example, only the second canva was drawn</p>
  
  <p>PS : It is perfectly working with .append() of jquery , but i am not using jquery on my project</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&gt;
  document.getElementById('mydiv').innerHTML += '&lt;canvas id="canvas1" width="50" height="50"&gt;&lt;/canvas&gt;'
  var ctx = document.getElementById("canvas1").getContext("2d");
  ctx.strokeStyle = "red";
  ctx.beginPath();
  ctx.moveTo(0,25);
  ctx.lineTo(50,25);
  ctx.stroke();
  
  document.getElementById('mydiv').innerHTML += '&lt;canvas id="canvas2" width="50" height="50"&gt;&lt;/canvas&gt;'
  var ctx2 = document.getElementById("canvas2").getContext("2d");
  ctx2.strokeStyle = "red";
  ctx2.beginPath();
  ctx2.moveTo(0,25);
  ctx2.lineTo(50,50);
  ctx2.stroke();
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="mydiv"&gt;
  
  &lt;/div</code></pre>
  </div>
  </div>
  </p>