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

See this fiddle

jQuery

var s=0;
$('#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,s,10,$(this).width(),$(this).height());
    s=s+$(this).width();
});

---

If you want that the position of divs in canvas should be exactly as displayed outside canvas then see the below fiddle:

Fiddle 2