<div id="target">
  <h1>Hello, World!</h1>
  <p>この要素がダウンロードされます</p>
  <p class="gradient">CSS も使えます</p>
  <p>が、↑のようにダウンロードすると見た目が変わることもあります</p>
</div>
<button onclick="download()">画像にしてダウンロード</button>

<!-- html2canvas を CDN 経由で読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js"></script>

.gradient {
  font-size: 3em;
  font-weight: 700;
  background: linear-gradient(to bottom right, blue, pink, green);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

function download() {
  var target = document.getElementById("target");
  var options = {
    type: "png",
    quality: 1
  };
  html2canvas(target, options).then(function (canvas) {
    var dataURL = canvas.toDataURL();
    var link = document.createElement("a");
    link.href = dataURL;
    link.download = "download.png";
    link.click();
  });
}