JSFiddle - React, Tailwind, and code Playground

by Bouh

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<link rel="preload" href="https://cdn.jsdelivr.net/gh/pilssken/assets/fonts/monogram.ttf" as="font" type="font/ttf" crossorigin="anonymous">


<div id="capture" style="padding: 10px; background: #f5da55">
  <h4 style="color: #000; ">My text to render</h4>
</div>

<div id="over" style="padding: 10px; background: #fF0000">
  <h4 style="color: #FfF; ">Cache a  div</h4>
</div>

<button id="bouton">Generate Text from html to canvas</button>

CSS

@font-face {
  font-family: "monogram";
  src: url("https://cdn.jsdelivr.net/gh/pilssken/assets/fonts/monogram.ttf");

}

body {
  font-family: "monogram", serif;
  margin: 0;
  padding: 0;
  font-size: 50px;
}

#over,
#capture {
  position: fixed;
  left: 0 px;
  top: 0 px;
}

#bouton {
  position: absolute;
  left: 150px;
}


canvas {
  position: absolute;
  top: 150px;
}

JavaScript

const button = document.querySelector('button');


button.addEventListener('click', event => {
  button.innerHTML = `Nombre de clics : ${event.detail}`;

  html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
  });
});