JSFiddle - React, Tailwind, and code Playground

by dirtyd77

HTML

<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">
<img src="http://lorempixel.com/100/100/">

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

CSS

#canvas{border: 1px solid red;}

JavaScript

var images = document.getElementsByTagName('img'); 
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var imageArray = Array.from(images);

// add all image heights together
var canvasHeight = imageArray.reduce(function (acc, img) {
	acc += img.height;
  return acc;
}, 0);

// just use first image as the width for this example
var canvasWidth = imageArray[0].width;

// set all canvas state prior to draws
canvas.height = canvasHeight;
canvas.width = canvasWidth;

var top = 0;
for (var i = 0; i < imageArray.length; i++) {
    var image = imageArray[i];
    
    // use x of 0 to draw on left most of canvas
    canvas.getContext('2d').drawImage(image, 0, top);
    top += image.height;
}