JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<canvas id="demo" width=400 height=400></canvas>

CSS

body {background:#07c}

JavaScript

var demo = document.getElementById('demo');
var ctx = demo.getContext('2d');

ctx.fillStyle = '#f90';
ctx.fillRect(0, 0, demo.width, demo.height);

clipArc(ctx, 200, 200, 150, 40);

function clipArc(ctx, x, y, r, f) {

    ctx.globalCompositeOperation = 'destination-out';
    ctx.filter = "blur(5px)";  // "feather"
    
/*     ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.fill(); */

    // reset comp. mode and filter
    
    
    ctx.fillRect(10, 10, 100, 100);
    
    
    ctx.globalCompositeOperation = 'source-over';
    ctx.filter = "none";
}