utility function to draw inside of a masked clip rect

Author: bandinopla

src/components/TextLabel.ts

@@ -4,10 +4,10 @@ import { LayoutElement } from "../layout/LayoutElement";
 export class TextLabel extends LayoutElement
 { 
 
-    constructor( protected label:string )
+    constructor( public label:string )
     {
         super();
-    }
+    } 
 
     override width(ctx: CanvasRenderingContext2D): number { 
         ctx.font = this.fontSize+'px '+Theme.config.fontFamily
@@ -16,8 +16,8 @@ export class TextLabel extends LayoutElement
 
     override renderContents(ctx: CanvasRenderingContext2D, maxWidth: number, maxHeight: number): void {
 
-        //text
-        this.writeText(ctx, this.label, this.fontSize, 0, maxHeight, Theme.config.textColor );
- 
+        this.drawClipped(ctx, maxWidth, maxHeight, 
+            ()=>this.writeText(ctx, this.label, this.fontSize, 0, maxHeight, Theme.config.textColor )
+        ) 
     } 
 }

src/core/CanvasElement.ts

@@ -65,4 +65,22 @@ export class CanvasElement {
         }
     }
 
+    /**
+     * Mask the draw to only be visible inside the square from 0,0 to width, height 
+     */
+    protected drawClipped(ctx: CanvasRenderingContext2D, width:number, height:number, draw:VoidFunction ){
+        ctx.save() 
+        
+        try {  
+
+            ctx.beginPath();
+            ctx.rect(0, 0, width, height);
+            ctx.clip();
+            draw();
+
+        } finally {
+            ctx.restore(); 
+        }
+    }
+
 }