JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<canvas id="canvas"></canvas>

JavaScript

function mergeImages(source1, source2){
    let image1 = new Image();
    image1.src = source1;
    var c = document.getElementById('canvas');
    var ctx = c.getContext("2d");
    image1.onload = function (){
        

        let image2 = new Image();
        image2.src = source2;
        image2.onload = function (){
            c.width = Math.max(image1.width, image2.width)
            c.height = image1.height + image2.height
            ctx.drawImage(image1, 0, 0, image1.width, image1.height);
            ctx.drawImage(image2, 0, image1.height, image2.width, image2.height);
            console.log(c.toDataURL("image/png"));
        };
    };
}
//mergeImages('https://i.imgur.com/5HtV0Nv.jpg', 'https://i.imgur.com/5HtV0Nv.jpg')
/**
https://stackoverflow.com/questions/52059596/loading-an-image-on-web-browser-using-promise
*/
function loadImage(url) {
  return new Promise(resolve => {
    const image = new Image();
    image.addEventListener('load', () => {
      resolve(image);
    });
    image.src = url;
  });
}
async function asyncMergeImages(source1, source2){
    let c = document.getElementById('canvas');
    let ctx = c.getContext("2d");
    let image1 = await loadImage(source1)
		let image2 = await loadImage(source2)
    debugger;
    c.width = Math.max(image1.width, image2.width)
    c.height = image1.height + image2.height
    ctx.drawImage(image1, 0, 0, image1.width, image1.height);
    ctx.drawImage(image2, 0, image1.height, image2.width, image2.height);
    console.log("async",c.toDataURL("image/png"));
}


asyncMergeImages('https://i.imgur.com/csFntM8.jpg', 'https://i.imgur.com/5HtV0Nv.jpg')