Как нарисовать содержимое DIV на холсте html5 с помощью jquery

Предположим, у меня есть div, и внутри этого div у меня есть несколько элементов управления формы, таких как текстовые поля, флажок раскрывающегося списка, радиокнопка и т. д. Теперь я хочу, чтобы, когда пользователь нажимает определенную кнопку, содержимое div будет отображаться на холсте. Я ищу в Google образец кода или пример, но не нашел. Пожалуйста, помогите мне, как я могу нарисовать содержимое DIV на холсте html5, используя jquery, так как элементы управления выглядят с таблицей стилей.

Вопрос обновлен

<div class="login">
<form method="post" action="www.mysite.com">
    <fieldset>
        <div class="login-fields"><label class="" for="username" id="username-lbl">User Name</label>                    
        <input type="text" size="25" class="validate-username" value="" id="username" name="username"></div>
        <div class="login-fields"><label class="" for="password" id="password-lbl">Password</label>                 
        <input type="password" size="25" class="validate-password" value="" id="password" name="password"></div>
        <button class="button" type="submit">Log in</button>
    </fieldset>
</form>
</div>

Предположим, у меня есть форма, подобная приведенной выше, которую мне нужно программно нарисовать на холсте с помощью jquery, и внешний вид моей формы будет таким же.

ОБНОВЛЕНИЕ

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
    }
}