Html to canvas broken on latest Chrome

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.9.0/html-to-image.js"></script>
<html>
  <body>
    <div class="flex">
      <div class="card">
        <h1>Thesis Paper</h1>
        <div class="i1">A</div>
        <div class="i2">B</div>
        <div class="i3">C</div>
        <div class="i4">D</div>
      </div>
      <div class="preview p1">
      </div>
      <div class="preview p2">
      </div>
    </div>
  </body>
</html>

CSS

body {
  background-color: #666;
}
.flex {
  display: flex;
  flex-direction: row;
}
.card {
  min-width: 200px;
  width: 200px;
  height: 300px;
  background-color: beige;
  border: 5px solid black;
  text-align: center;
  
  display: grid;
  grid-template-columns: 100px auto;
  grid-template-rows: auto 100px 100px;
  grid-template-areas: 
    "header header"
    "one two"
    "three four";
  justify-items: center;
}
img {
  width: 60px;
  height: 60px;
}
.card h1 {
  grid-area: header;
}
.card .i1 {
  grid-area: one;
}
.card .i2 {
  grid-area: two;
}
.card .i3 {
  grid-area: three;
}
.card .i4 {
  grid-area: four;
}
.preview {
  margin-left: 10px;
}

JavaScript

window.addEventListener('load', (event) => {

  html2canvas(document.querySelector(".card")).then(canvas => {
    document.querySelector(".preview.p1").appendChild(canvas);
  });

  htmlToImage.toCanvas(document.querySelector(".card")).then(canvas => {
    document.querySelector(".preview.p2").appendChild(canvas);
});
});