JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<img onclick="build(this)" id="face1" src="https://fallbacks.carbonads.com/nosvn/fallbacks/731050e6bd3fc6979e1cb1a972294dae.png"/>
<div id="map_canvas" style="width:640px;height:480px;"></div>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

function build(caller){
 alert('ddd');
        var image = getMergedUrl(document.getElementById("face1"));
        var img = document.createElement('img');
        img.src = image;
        document.getElementById("map_canvas").appendChild(img);
    }
    function getMergedUrl(img){
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        //Рисуем окружность. Радиус возьмем по высоте
        ctx.beginPath();
        //x, y, radius, startAngle, endAngle, anticlockwise
        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);
        return canvas.toDataURL("image/png");
    }