JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div id="root">
  <div class="star-mask">
    <div class="square"></div>
  </div>
</div>

<button onclick="capture()">Capture</button>

CSS

.star-mask {
  clip-path: path('m55,237 74-228 74,228L9,96h240');  
}

.square {
  background-color: red;
  width: 200px;
  height: 150px
}

JavaScript

function capture() {
	let node = document.querySelector('.star-mask')


  html2canvas(node)
    .then(canvas => {
      document.querySelector('#root').appendChild(canvas)
    })
}