Caman modify canvas/image without DOM render

Using tricks to modify image/canvas with CamanJS and render in a undisplayed DOM element

by RomainMazB

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.js"></script>
<button id="rotate">
Rotate right and download file
</button>
<img id="image"...

CSS

body {
  background-color:black;
}

JavaScript

let image = new Image(),
    button_rotate = document.getElementById("rotate");

button_rotate.onclick = () => { // Rotate canvas which is not displayed in DOM
	image.onload = function() {
    var div = document.createElement("div"); // Create an undisplayed DOM element
    div.appendChild(image);
		for(let i = 0; i < 2; i++) {
    	if(i == 0) {
        Caman("#image", function () {
          this.rotate(90); // Reverse canvas
          this.render();
        });
      } else {
      	Caman("#image", function () {
          this.resize({
            width: 500,
            height: 300
          }); // Reverse canvas
          this.render(function () { // Rendering in the undisplayed DOM Element
            let a  = document.createElement('a');
            a.href = this.toBase64();
            a.download = Date() +'_image.png';
            a.click(); // Download file to see it's working!
          });
        });
      }
  	}
  }
  image.src =...