title: Screenshot of site online
body: <p>I added a feature in the <a href="http://cgi.di.uoa.gr/~std10093/cage_scheduler.php" rel="nofollow noreferrer">Cage Scheduler</a>, where if you click the grid button on the second match, you can drag and drop players in the field, in order to form the teams. I would like this information to be shareable among the players. So if I form two teams, I would like to share it with another player, in order to hear what he thinks about it.</p>
  
  <p><a href="https://i.stack.imgur.com/bVhaW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bVhaW.jpg" alt="enter image description here"></a></p>
  
  <p>The html of the pitch is:</p>
  
  <pre><code>&lt;a href="#secondPopup" onclick="fill_players(2)" data-rel="popup" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true" class="ui-link ui-btn ui-btn-b ui-icon-grid ui-btn-icon-notext ui-btn-inline ui-shadow ui-corner-all" data-transition="pop" role="button"&gt;&lt;p&gt;Basic Popup&lt;/p&gt;&lt;/a&gt;
  &lt;div data-role="popup" id="secondPopup"&gt;
    &lt;div id="footballField"&gt;&lt;/div&gt;
    &lt;div id="secondGrid"&gt;&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>where <code>secondGrid</code> gets full with players of that style:</p>
  
  <pre><code>&lt;div class="dragNdrop ui-draggable ui-draggable-handle" style="position: relative;"&gt;
    &lt;span&gt;Spiropoulos &lt;/span&gt;
    &lt;span&gt;&lt;img class="alignPic" src="img/rb.jpg"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For that purpose, I thought a screenshot of that would be ideal (if you have any other good alternative, let me know). It's not that bad if it a whole screenshot(I mean the whole screen), rather than the actual field with the players. So, after checking this <a href="https://stackoverflow.com/questions/5621907/how-to-screenshot-website-in-javascript-client-side-how-google-did-it-no-nee">question</a>, I wrote this code, <strong><em>for testing purposes, in a new empty project</em></strong>:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"/&gt;
          &lt;title&gt;test2&lt;/title&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="html2canvas.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p&gt;
              Hello world!
          &lt;/p&gt;
          &lt;img src="http://www.conti-online.com/generator/www/de/en/continental/contisoccerworld/themes/00_fifa_wm_2010/55_dfb_stars/img/dfb_2002_03_en,property=original.jpg" alt="Smiley face" height="42" width="42"&gt;
  
          &lt;script&gt;
              html2canvas(document.body, {
                  logging:true,
                  onrendered : function(canvas) {
                      document.body.appendChild(canvas);
                  }
              });
          &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However, this will take into account only the text and not the image. However, I am not able to reproduce it with a JSFiddle. How to achieve my purpose?</p>