JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="canvas" width="500" height="500"></canvas>
JavaScript
var data=[
{path:'http://www.photographymad.com/files/images/purple-flowers.jpg',
x:0,y:0},
{path:'http://webneel.com/wallpaper/sites/default/files/images/01-2014/35-flower-wallpapers.preview.jpg',
x:100,y:100},
{path:'https://blog.compete.com/wp-content/uploads/2011/08/Pink-Flowers.jpg',
x:200,y:200},
{path:'http://big-flowers.com/wp-content/uploads/2015/03/90urp1283y4fn.jpg',
x:300,y:300},
];
var drawPath=function(){
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
i=0,
drawImage=function(){
var obj=data[i++];
if(obj){
var image = new Image();
image.onload=function(){
context.drawImage(this, obj.x, obj.y);
drawImage();
};
image.src=obj.path;
}
};
drawImage();
};
drawPath();