title: Saving multilayer canvas angularjs javascript
body: <p>I have a multilayer canvas that I want to save locally with a button(it will eventually have to be saved on aws but for now I am trying to figure out how to do it locally). I want one png file of the entire canvas and not just one layer. How would I do this, I've tried a few tutorials but they didn't seem to work. I have just started using javascript and angularjs so bear with me</p>
  
  <p>AngularJS/HTML</p>
  
  <pre><code>&lt;div style="position: relative; border: 1px solid black;"&gt;
  &lt;canvas id="layer1" width="200" height="200" style="position: absolute; left: 0; top: 0; z-index: 0;"&gt;&lt;/canvas&gt;
  
  &lt;canvas id="layer2" width="200" height="200" style="position: absolute; left: 0; top: 0; z-index: 1;"&gt;&lt;/canvas&gt;
  &lt;/div&gt; 
  
  &lt;p&gt;&lt;button onclick="body()"&gt;Body&lt;/button&gt;&lt;/p&gt;
  &lt;p&gt;&lt;button onclick="hairstyle1()"&gt;Hair style 1&lt;/button&gt;&lt;/p&gt;
  &lt;p&gt;&lt;button onclick="hairstyle2()"&gt;Hair style 2&lt;/button&gt;&lt;/p&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>function body() {
  var canvas = document.getElementById('layer1');
  var ctx = canvas.getContext('2d');
  var imageObj = new Image();
  
  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);
  };
  imageObj.src = 'body.png';
  }
  
  function hairstyle1() {
  var canvas = document.getElementById('layer2');
  var ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var imageObj = new Image();
  
  imageObj.onload = function() {
    ctx.drawImage(imageObj, 50, 7, imageObj.width, imageObj.height);
  };
  imageObj.src = 'hair1.png';
  }
  
  function hairstyle2() {
   var canvas = document.getElementById('layer2');
   var ctx = canvas.getContext('2d');
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   var imageObj = new Image();
  
   imageObj.onload = function() {
    ctx.drawImage(imageObj, 50, 7, imageObj.width, imageObj.height);
  };
  imageObj.src = 'hair2.png';
  }
  </code></pre>