JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head>
        <script type="text/javascript">
            function init(){
                canvas = document.getElementById('canvas1');
                ctx = canvas.getContext("2d");
                _canvas=document.createElement('canvas');
                _canvas.width = 200;
                _canvas.height = 200;
                _ctx = _canvas.getContext("2d");
            
                var img1 = new Image();
                img1.onload = function(){
                    var w = img1.width
                    var h = img1.height
            
                    ctx.drawImage(img1,0,0);
            
                    // Create a circular clipping path 
                    _ctx.beginPath();
                    _ctx.arc(100, 100, 100,0,Math.PI*2,true);
                    _ctx.clip();
                    _ctx.drawImage(img1, 0, 0);
            
                    for (var i = 0; i < 5; i++){
                        ctx.drawImage(_canvas, 1.25 * i * _canvas.width, 500);
                    }
                }
            
                img1.src = "http://images4.wikia.nocookie.net/__cb20100607195347/deusex/en/images/3/32/Jccover.jpg";
                
            
            }
        </script>
    </head>
    <body onload="init();" bgcolor="yellow">
        <canvas id="canvas1" width="1500" height="1500"></canvas>
    </body>
    
</html>