Convert html div having multiple images to single image using javascript

Question

I am trying to convert a DIV to single image. The div has 4 images in it. I have found the js for \"htmltocanvas\" but this jquery plugin does not create image with all images p

Answer 1

Here is my answer (based on @Zwords awesome answer) which takes the Top and Left positions into account. In case you want to layer those images.

$('#myJershy').children('img').each(function(){
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById($(this).attr('id'));
 ctx.drawImage(img,$(this).css('left').replace('px',''),$(this).css('top').replace('px',''),$(this).width(),$(this).height());
});

Forked Fiddle from @Zword