JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="arif" width="300px" height="300px" style="border:1px solid #000">canvas desteklemeyen tarayıcı</canvas>

JavaScript

var canv=document.getElementById("arif");//canvasımızı tanımlıyoruz
var ctx=canv.getContext("2d");//2d context oluşturuyoruz. 
var img=document.createElement("img");//img elementi oluşturuyoruz(create)
img.onload=function(){ //resim yüklendiğinde çalışacak fonksiyon
    
    ctx.save();//ctxin durumunu kaydediyoruz. Daha sonra burdaki haline çevireceğiz. 
    ctx.beginPath(); //yol başlangıcı tanımlıyoruz
    ctx.arc(106, 77, 55, 0, Math.PI * 2, false); //daire çiziyoruz
 
    // Oluşturduğumuz şekle göre kırpma işlemi yapacağız. 
    ctx.clip();
    //imgyi çizdiriyoruz. 
    ctx.drawImage(img, 0, 0);
 
    // ctxin eski haline çeviriyoruz. 
    ctx.restore();
};
img.src = "http://i.imgur.com/wswqIxyb.jpg";//img source unu ayarlıyoruz.