JSFiddle - React, Tailwind, and code Playground

by Jitendra Pal

HTML

<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<canvas id="canvas" width="450" height="297"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
image1 = new MarvinImage();
image1.load("https://n3.sdlcdn.com/imgs/b/f/m/large/K-c-Black-Faux-Georgette-SDL741954551-1-0c194.webp", imageLoaded);
image2 = new MarvinImage();
image2.load("https://i.imgur.com/h3HBUBt.png", imageLoaded);
image3 = new MarvinImage();
image3.load("https://i.imgur.com/UoISVdT.png", imageLoaded);

var loaded=0;

function imageLoaded(){
  if(++loaded == 3){
    var image = new MarvinImage(image1.getWidth(), image1.getHeight());
    Marvin.combineByAlpha(image1, image2, image, 0, 0);
    Marvin.combineByAlpha(image, image3, image, 190, 120);
    image.draw(canvas);
  }
}