drawOnCanvas2D('#playground', (c) => {// drawing settingsconstcenter=vec(200,225); // triangle centerconstR=200,r=80; // radii (large/small)// textconsttext="<canvas>";consttextHeight= (R- r)/2;c.font =`bold ${textHeight}pt sans-serif`; // Big fontconsttextWidth=c.measureText(text).width;consttextCenter=center.plus(0,R/2-R/16);consttextRect=Rect.withCenter(textCenter,vec(textWidth/2, textHeight/2));c.strokeRect(...textRect.coords);c.strokeText(text,...textRect.bottomLeft.coords);// vertical stripe down the middle conststripCenter=center.plus(0,-R/4); // center of triangle heightconststripHalfDimension=vec(40,.85*R);conststrip=Rect.withCenter(stripCenter, stripHalfDimension);c.strokeRect(...strip.coords);// create path for clipping regionc.polygon(3,...center.coords,R);c.polygon(3,...center.coords, r, { clockwise:false });// โญ make that path the clipping regionc.clip();c.fillStyle ='hsl(0 80% 10% / 0.05)';c.fill();c.stroke(); // โญ half of line width will be clipped away// fill strip (inside the clipping region)c.fillStyle ="hsl(270 80% 50% / 0.8)";c.fillRect(...strip.coords);// fill text (inside the clipping region)c.fillStyle ="hsl(330 80% 50% / 0.8)";c.fillText(text,...textRect.bottomLeft.coords);});