html2canvas 1.0.0-rc.5 2019 not working with rounded corners/border-radius (image is always rectangular)?

Question

I used the 2016 (0.5.0) version of html2canvas for a long time because it always worked well for what I needed it for. Now I have to switch to the current version, but I have some problems:

The image that is created no longer has rounded corners. The png is always rectangular. And now I ask myself if I am doing something wrong, or if it might be a bug in the current version of html2canvas? I wanted to ask here first before posting this as an "issue" on GitHub.

The result with the 2016 0.5.5 version: https://i.sstatic.net/3IPcs.png (rounded corners)
The result with the 2019 1.0.0 version: https://i.sstatic.net/ba2JB.png (rectangular corners)

Here's a JSFiddle that shows the issue: https://jsfiddle.net/ROPfiddle/jskLuw3v/3/

This is the current version (1.0.0-rc.5) of html2canvas: https://html2canvas.hertzen.com/dist/html2canvas.js

This is my CSS:

body {
  font-family: system-ui, Helvetica, Arial, sans-serif;
  margin: 19px 20px 0 20px;
  background-color: #000;
}
#wrapper {
  position: absolute;
  white-space: nowrap;
}
#badge {
  padding: 70px 67px 63px 71px;
  border: 13px solid #a6a6a6;
  border-radius: 110px;
  line-height: 1;
  background-color: #000;
  color: #fff;
}
.icon img {
  width: 273px;
  height: auto;
  border-radius: 62px;
}
.icon {
  float: left;
}
.typo {
  margin-top: -3px;
  margin-left: 336px;
}
.text {
  font-size: 92px;
  font-weight: 500;
  color: #a6a6a6;
  letter-spacing: 0.04em;
}
.name {
  font-size: 191px;
  font-weight: 700;
  margin-left: -6px;
  letter-spacing: -0.0125em;
}
.finalbadge {
  width: 100%;     
  height: auto;   
}

This is my HTML (w/o the base64 encoded image):

<div id="wrapper">
  <div id="badge">
    <div class="icon">
      <img src="data:image/png;base64, "/>
    </div>
    <div class="typo">
      <span class="text">Listen on</span><br />
      <span class="name">iTunes</span>
    </div>
  </div>
</div>

And this is my JS:

html2canvas(document.getElementById("badge")).then(function(canvas) {
    document.body.appendChild(canvas);

    var img = canvas.toDataURL("image/png");
    document.body.innerHTML = '<img class="finalbadge" src="'+img+'"/>';
});

Am I doing something wrong? Or must it be html2canvas?

Since the question has already been answered, here's the JSFiddle that shows the solution/answer: https://jsfiddle.net/ROPfiddle/zyj9b6dc/2/

---

Answer 1

I can't tell you if this is a change from the 0.5.5 to the 1.0.0 version of html2canvas.

Nevertheless beside the required HTML element, html2canvas() accepts an optional second parameter which is a Javascript object. Among these options is a property called backgroundColor which accepts a rgba value - thus including transparency. If you set all 4 values to null you get your transparent rounded corners back.

So simply change

html2canvas(document.getElementById("badge"))

to

html2canvas(document.getElementById("badge"), {backgroundColor: "rgba(0,0,0,0)"})