Rewrite html2canvs accrding to the new syntax in help docs

Question

I've just downloaded html2canvs 0.5. The given syntax seems a bit different to 0.4

I'd prefer to follow the new syntax. I was using onrendered as I had to set height, width, transparency, etc...

html2canvas(document.getElementById('elem'), {
    onrendered: function(canvas) {
       document.getElementById('holder').appendChild(canvas);
    },
    width: widthVar,
    height: heightVar,
    background: undefined,
    letterRendering: true,
    useCORS: true
});

My question is how do I do the same (set height, width, transparency, etc...) using the new syntax?

New syntax as per the help docs:

document.querySelector("button").addEventListener("click", function() {
    html2canvas(document.querySelector("#elem"), {
      canvas: canVar
    }).then(function(canvas) {
       console.log('Drew on the existing canvas');
    });
}, false);

Answer 1

The new syntax you're referring to is just the return of a promise which allows asynchronous execution of the code and doesn't need event listener (i.e onrendered).

So the only * thing that has changed is this callback, that you should now wrap in the then()method. The other options should still be the same, and the syntax is still an object containing those options as keys :

html2canvas(document.getElementById('elem'), {
    width: widthVar,
    height: heightVar,
    background: undefined,
    letterRendering: true,
    useCORS: true
}).then(function(canvas){
  document.getElementById('holder').appendChild(canvas);
 })

▶︎ fiddle

_{* some other things may have changed but in your particular case, it seems irrelevant}