JSFiddle - React, Tailwind, and code Playground

by Gabriel Ambrósio Archanjo

HTML

by <a href="https://www.marvinj.org">www.marvinj.org</a></br>
<script src="https://www.marvinj.org/releases/marvinj-1.0.js"></script>


<div class="inline">
<table>
<tr>
  <td>
    <img src="https://i.imgur.com/xG4i1s2.jpg"></img>
  </td>
   <td>
    <img src="https://i.imgur.com/lMn5ldE.jpg"></img>
  </td>
</tr>
<tr>
  <td>
    <img src="https://i.imgur.com/dblviMp.jpg"></img>
  </td>
   <td>
    <img src="https://i.imgur.com/4hAnkCV.jpg"></img>
  </td>
</tr>
<tr>
  <td>
    <img src="https://i.imgur.com/vhqPT2g.jpg"></img>
  </td>
</tr>

</table>
</div>
<div class="inline">
  <canvas id="canvas" width="450" height="475"></canvas>
</div>

CSS

body {
  font-size: 12px;
  }

.inline {
  display: inline-block;
}

img {
  max-width: 150px;
}

JavaScript

var canvas = document.getElementById("canvas");
var urls = [
	"https://i.imgur.com/xG4i1s2.jpg",
	"https://i.imgur.com/lMn5ldE.jpg",
	"https://i.imgur.com/dblviMp.jpg",
	"https://i.imgur.com/4hAnkCV.jpg",
	"https://i.imgur.com/vhqPT2g.jpg"
	
];
var images = [];

var loadedImages=0;
for(var i=0; i<5; i++){
	images[i] = new MarvinImage();
	images[i].load(urls[i], imageLoaded);
}

function imageLoaded(){

	if(++loadedImages == 5){
		var imageOut = new MarvinImage(images[0].getWidth(), images[0].getHeight());
		Marvin.mergePhotos(images, imageOut, 38);
		imageOut.draw(canvas);
	}
}