Search code examples
javascripthtmlcanvashtml2canvas

Capture div to a smaller canvas


I've got some html content in $('#ImageHolder'). This is 116px wide and 152px tall. I want to capture it into a 87px wide 114px tall canvas. But when I tried using the below code it's not capturing the full $('#ImageHolder'). It stops halfway through. How do I capture the 116px wide and 152px tall $('#ImageHolder') to a 87px wide 114px tall canvas?

   var parnt =document.getElementById('ImageHolder');
   var xyz = document.getElementById('mainItm');

   html2canvas(xyz).then(function(canvas){          
      var cvs=document.createElement('canvas');
      cvs.width=87;
      cvs.height=114;
      parnt.appendChild(cvs);    
      var ctx=cvs.getContext('2d');
      ctx.drawImage(canvas,x,y,canvas.width,canvas.height,0,0,87,114);
    });

Solution

  • // use 0,0 instead of x,y
    ctx.drawImage(canvas,0,0,canvas.width,canvas.height,0,0,87,114);