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>

JavaScript

let canvas = document.createElement("canvas"),
    context = canvas.getContext("2d"),
    button_rotate = document.getElementById("rotate");

// fill canvas with green horizontal rect
canvas.width = 400;
canvas.height = 100;
context.fillStyle = "green";
context.font = '25px serif';
context.fillText("Fiddle by Romain 'Maz' BILLOIR", 0, 50);

button_rotate.onclick = () => { // Rotate canvas which is not displayed in DOM
  var div = document.createElement("div"); // Create an undisplayed DOM element
  div.appendChild(canvas);
	Caman(canvas, function () {
    this.rotate(180); // 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!
    });
  });
}