JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="800" height="800"></canvas> 


asdasd

JavaScript

var thumbnailWidth = 100; // Thumbnail width in pixels
var gap=10; // gap between thumbnails
var sourceImagePaths = [ // paths to source images   
    "http://star.arm.ac.uk/press/2011/Andromeda.jpg"]; 
var y=0; // vertical offset on canvas
var i=0; // image index
var image = new Image(); 
var context = $('#canvas')[0].getContext("2d");

function loadImage(){
  image.onload = onImageLoad;
  image.src = sourceImagePaths[i];
}

function onImageLoad(){
  var height = Math.round((thumbnailWidth/image.width)*image.height);           
  context.drawImage(image, 0, 0, image.width, image.height, 0, y, thumbnailWidth, height);      
  y+= height + gap;
  image.src = null;
  i++;
  if(i<sourceImagePaths.length){
    loadImage();
  }
}     
loadImage(); // load images