title: render one div and it's interactive content by clicking on another div
body: <pre><code>&lt;div id="1" class="aaa" style="position: relative; left: 50px; top: 50px; width: 300px; height: 200px; border: solid 1px; background: #dddddd; overflow: hidden;"&gt;
      &lt;div style="position: relative; left: 30px; top: 25px; width: 100px; height: 50px; background: blue;" onmouseenter="this.style.background='red';"&gt;&lt;/div&gt;
      &lt;div style="position: relative; left: 160px; top: 70px; width: 100px; height: 50px; background: blue;" onmouseenter="this.style.background='orange';"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="2" class="bbb" style="position: relative; left: 250px; top: 100px; width: 50px; height: 20px; border: solid 1px; background: #cccccc; text-align: center; overflow: hidden;"&gt;click&lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/FWyBQ/" rel="nofollow noreferrer">http://jsfiddle.net/FWyBQ/</a></p>
  
  <p>I have one div (id="1" class="aaa") which contains multiple interactive divs. State of this interactive content should be able to be rendered as image (gif?) with the click on the other div (id="2" class="bbb").</p>
  
  <p>That image should preferably be opened in a new tab or window. Or maybe just right click > save as in place.</p>
  
  <p>p.s. I am aware of scripts like html2canvas and phantomjs, but I have no idea how to implement them in my case.</p>
  
  <p><strong>edit:</strong></p>
  
  <p>Now I'm trying to implement <a href="https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf"><strong>this solution</strong></a>, which with a little tweaking should work with processing.js (<a href="http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js" rel="nofollow noreferrer">http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js</a>).</p>
  
  <p>I guess I just need the right jquery code with processing.js in order to achieve the functionality I need. I've tried this and it doesn't work:</p>
  
  <pre><code>$('.bbb').click(function (e) {
          var canvas = document.getElementById("1"),
              img    = canvas.toDataURL("image/png");
          $('.aaa').document.write('&lt;img src="'+img+'"/&gt;');
      });
  </code></pre>