JSFiddle - React, Tailwind, and code Playground

by Jitendra Pal

HTML

<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<script src="https://unpkg.com/merge-images"></script>
<canvas id="canvas" width="350" height="397"></canvas>
<img/>

JavaScript

var canvas = document.getElementById("canvas");

/* var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height); */

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://i1.sdlcdn.com/static/mobile/img/mobile/mobileviews/SDIcon-Darwin-New.ico", imageLoaded);

var loaded=0;

function imageLoaded(){
  if(++loaded == 3){
    var image = new MarvinImage(image1.getWidth(), image1.getHeight());
    Marvin.combineByAlpha(image1,image1, image, 20, 0);
    Marvin.combineByAlpha(image, image3, image, 250, 0);
    image.draw(canvas);
    
    if(canvas){
    var img = new Image();
    img.src = canvas.toDataURL();
    document.body.append(img);
    }
  }
}