title: Javascript combine Images
body: <p>I tried everything to get this work but didn't happen.
  Want a method to combine two images (that they are overlayed somehow).</p>
  
  <p>I tried it like described here: <a href="https://stackoverflow.com/questions/6765370/merge-image-using-javascript">Merge Image using Javascript</a></p>
  
  <p>With this Code:</p>
  
  <pre><code>var c=document.createElement("canvas");
  c.width = 100;
  c.height = 100;
  var ctx=c.getContext("2d");
  var imageObj1 = new Image();
  imageObj1.src = base64String;
  var imageObj2 = new Image();
  imageObj1.onload = function() {
     ctx.drawImage(imageObj1, 0, 0, 328, 526);
     imageObj2.src = "2.png";
     imageObj2.onload = function() {
        ctx.drawImage(imageObj2, 15, 85, 300, 300);
        var img = c.toDataURL("image/png");
     }
  };
  </code></pre>
  
  <p>But it doesn't work.</p>
  
  <p>I get the first image by Base64 from Local Storage (<a href="https://stackoverflow.com/questions/21227078/convert-base64-to-image-in-javascript-jquery">as described here</a>) like this:</p>
  
  <pre><code>var img = new Image();
  img.src = base64String;
  </code></pre>
  
  <p>And the base64 String looks like this: <code>data:image/png;base64,iVBORw0KGgoAAAANS....</code></p>
  
  <p>Does this somehow break this approach with canvas?
  Any help is appreciated :) took me already hours and can't figure it out....</p>