title: How do i draw the content of DIV on html5 canvas using jquery
body: <p>Suppose I have div and inside that div I have few form controls like textboxes,dropdow checkbox,radiobutton etc. Now I want that when a user clicks a particular button, the content of div will be drawn on the canvas. I search google for having some sample code or example but found none. Please guide me how could I draw the content of DIV on html5 canvas using jquery with as it is the controls looks with style sheet.</p>
  
  <h2>Question updated</h2>
  
  <pre><code>&lt;div class="login"&gt;
  &lt;form method="post" action="www.mysite.com"&gt;
      &lt;fieldset&gt;
          &lt;div class="login-fields"&gt;&lt;label class="" for="username" id="username-lbl"&gt;User Name&lt;/label&gt;                    
          &lt;input type="text" size="25" class="validate-username" value="" id="username" name="username"&gt;&lt;/div&gt;
          &lt;div class="login-fields"&gt;&lt;label class="" for="password" id="password-lbl"&gt;Password&lt;/label&gt;                 
          &lt;input type="password" size="25" class="validate-password" value="" id="password" name="password"&gt;&lt;/div&gt;
          &lt;button class="button" type="submit"&gt;Log in&lt;/button&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Suppose I have a form like above which I need to draw programmatically on canvas by jquery and look &amp; feel of my form will be same.</p>
  
  <h2>UPDATE</h2>
  
  <pre><code>var domElement = document.getElementById('myElementId');
  html2canvas(domElement, {
      onrendered: function (domElementCanvas) {
          var canvas = document.createElement('canvas');
          canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 100, 100);
  
          // do something with canvas
      }
  }
  </code></pre>