JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/1.6.1/pixi.js"></script>
<canvas id='c1' style='background-color: #efefef;'></canvas>
<canvas id='c2' style='background-color: #efefef;'></canvas>

JavaScript

var WIDTH = 300;
var HEIGHT = 300;
var RADIUS = 65;

var createPoint = function(x,y) { return {x:x,y:y}; };
var rotateXY = function(x,y,angle) {
    var rad = Math.PI * angle/180;
    var cosVal = Math.cos(rad);
    var sinVal = Math.sin(rad);
    return createPoint(cosVal*x - sinVal*y,
                       sinVal*x + cosVal*y);
};

var computeMaskPolygon = function(x,y,radius,angle) {
    while(angle<0) 
        angle += 360;
    angle%=360;
    
    var delta = rotateXY(0, -2*radius, angle);    
    var pts = [createPoint(x,y-2*radius), 
               createPoint(x,y),
               createPoint(x+delta.x, y+delta.y)];
    
    if(angle > 270)
        pts.push(createPoint(x-2*radius,y));
    if(angle > 180)
        pts.push(createPoint(x,y+2*radius));
    if(angle > 90)
        pts.push(createPoint(x+2*radius,y));
    
    return pts;
};


// Draw left on canvas.
var canvasPieFunc = (function() {    
    
    var c = document.getElementById('c1');
    c.width = WIDTH;
    c.height = HEIGHT;    
    var ctx = c.getContext("2d");
    
    var drawCircle = function(x,y,radius) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.stroke();
    };
    
    var centerX = c.width/2;
    var centerY = c.height/2;
    
    return function(angle) {
        var pts = computeMaskPolygon(centerX, centerY, RADIUS, angle);
        
        ctx.clearRect(0,0,c.width,c.height);
        drawCircle(centerX, centerY, RADIUS);
        ctx.strokeStyle = "1px solid #000000";
        
        ctx.beginPath();        
        ctx.moveTo(pts[0].x, pts[0].y);
        for(var i=1;i<pts.length;++i) {
            ctx.lineTo(pts[i].x, pts[i].y);
        }
        ctx.lineTo(pts[0].x, pts[0].y);
        ctx.stroke();
        ctx.rotation = angle
    };
})();

var webglPieFunc = (function() {    
    var centerX = WIDTH/2;
    var centerY = HEIGHT/2;
    var radius = 65;
    
    var updatePieMask = function(g,x,y,radius,angle) {
        g.clear();
       ...