JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width=250 height=250 id='canvas'></canvas>

JavaScript

let counter = 0;
const images = ['https://placekitten.com/200/200', 'https://placekitten.com/200/201'].map(url => {
 	const img = new Image();
  img.src = url;
  img.onload = () => {
   	counter++;
    if (counter == images.length) render();
  }
  return img;
});

function render() {
	const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  images.forEach((img, i) => {
    ctx.save();
    ctx.beginPath();
    ctx.arc(100+50*i, 100+50*i, 100, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img, 50*i, 50*i, 200, 200);
    ctx.restore();
  });
}