JSFiddle - React, Tailwind, and code Playground

by pukster

HTML

<html>
    
    <head>
        <script type="text/javascript">
            function init(){
                canvas=document.getElementById('canvas1');    //get the canvas element from HTML
                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.translate(w / 2,  1.5 * h);       
                    ctx.beginPath();
                    ctx.arc(0,0,100,0,Math.PI*2,true);
                    ctx.clip();
                    ctx.drawImage(img1,-w / 2,-150);
                }
            
                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="1000" height="1000"></canvas>
    </body>
    
</html>