JSFiddle - React, Tailwind, and code Playground

by Mixail

HTML

<canvas id='canvas'>Обновите браузер</canvas>

CSS

.pie-chart {
    opacity:0.5;
}

JavaScript

var tmpCtx = document.getElementById('canvas').getContext('2d');
draw();
function draw() {    
    var thumbImg = document.createElement('img');    
    thumbImg.src = 'http://api-maps.yandex.ru/2.0.36/images/6fd7feb125b46d071fceeb86371edea2.png';
    thumbImg.onload = function() {
        tmpCtx.save();
        tmpCtx.beginPath();        
        tmpCtx.moveTo(46,46);
        tmpCtx.arc(23,23, 46, 0, Math.PI*0.4, true);        
        tmpCtx.moveTo(46,46);        
        tmpCtx.closePath();
        tmpCtx.clip();
        tmpCtx.drawImage(thumbImg, 0, 0, thumbImg.width, thumbImg.height);
        
        /*tmpCtx.beginPath();
        tmpCtx.arc(10, 10, 25, 0, Math.PI, true);                
        tmpCtx.clip();
        tmpCtx.closePath();
        tmpCtx.restore();*/
    }
}