JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="942" height="628"></canvas>

<!-- пример сайта know-online.com -->

JavaScript

var imgSource = "//know-online.com/examples/nsk.jpg"; // оригинальная картинка

// выполнение функции, когда картинка полностью загрузится
var img = new Image();
img.src = imgSource;
img.onload = function(){

    var canvas = document.querySelector('canvas')
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(img.width/2, img.height/2, img.height/2, 0, Math.PI*2, true); // рисование круглой фигуры
    ctx.closePath();
    ctx.fill();
  
    ctx.globalCompositeOperation = 'source-in'; // картинка показывается на пересечнии самой картинки и фигуры
    ctx.drawImage(img,0,0); // добавление картинки в <canvas>
  
}