title: How to make screenshot - html2canvas alternative reading css transform property
body: <p>I have 2 images - one background and one image that I put into background. I want to merge these 2 images into one in the same position as they are. Second image should be rotated and resized.</p>
  
  <p>Something like <code>html2canvas</code> but I need to use another method because <code>html2canvas</code> doesn't read css transform.</p>
  
  <p>My current code is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $(document).ready(function(){
     $('body').on('click', '.add-bomb', function(){
                  var src = $(this).attr('src');
                  $( ".bomb-overlay-holder" ).html('&lt;img id="bomb-overlay"&gt;');
                  $('.bomb-overlay-holder &gt; img').attr('src',src);
                  $( ".bomb-overlay-holder" ).draggable({ containment: ".background-bomb" });
                  $( "#bomb-overlay" ).resizable({autoHide: true,containment: ".background-bomb"});
                 
                  $( "#bomb-overlay" ).parent().rotatable();
     });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="background-image-holder" id="background-image-holder"&gt;
                          &lt;img src="&lt;?php echo $bg_path;?&gt;" class="background-bomb"&gt;
                          &lt;span class="bomb-overlay-holder"&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and I'm using <code>html2canvas</code> to make screenshot of images like that:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>html2canvas($("#background-image-holder") , {
        onrendered: function(canvas) {
                   var dataURL = canvas.toDataURL("image/png");
         }
    }</code></pre>
  </div>
  </div>
  </p>