JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<canvas id='canvas' width=500 height=500></canvas>

JavaScript

(function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
ctx.beginPath();
     ctx.fillStyle = "rgba(0,0,0,.55)";
      ctx.font = "500px Times New Roman";
  ctx.fillText("B", 5, 500);
  ctx.globalCompositeOperation = 'source-out'; 
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillText('B',10,505);/*    
    ctx.lineWidth = 5;

      ctx.fill();
   // ctx.clip();
     
   // ctx.save();
  ctx.shadowOffsetX = 10;
  ctx.shadowOffsetY = 5;
  ctx.shadowBlur = 15;
  ctx.shadowColor = "rgba(0, 0, 0, .25)";
 
ctx.clip();  
    //ctx.fontWeight = "500";
  ctx.fillStyle = "Black";
  ctx.fillText("B", 5, 500);
    ctx.fill();
  
   // ctx.restore();
   // ctx.fillText('B',5,500);
//    ctx.globalCompositeOperation = 'destination-atop';   
      ctx.shadowOffsetX = 0;
  ctx.shadowOffsetY = 0;
    ctx.shadowColor = 'rgba(255,255,255,0)';
      ctx.globalCompositeOperation = 'source-atop';
        ctx.lineWidth = 5;
    ctx.strokeStyle = "RGBA(255,255,255,.25)";
      
    ctx.strokeText("B", 5, 500);
*/
}())