added rounded buttons

src/Nodes/UIElement.ts

@@ -12,6 +12,8 @@ export default class UIElement extends CanvasNode{
 	fontSize: number;
 	hAlign: string;
 	vAlign: string;
+	borderRadius: number;
+	borderWidth: number;
 
 	// EventAttributes
 	onClick: Function;
@@ -36,6 +38,8 @@ export default class UIElement extends CanvasNode{
 		this.fontSize = 30;
 		this.hAlign = "center";
 		this.vAlign = "center";
+		this.borderRadius = 5;
+		this.borderWidth = 1;
 
 		this.onClick = null;
 		this.onClickEventId = null;
@@ -143,6 +147,10 @@ export default class UIElement extends CanvasNode{
 		return this.backgroundColor.toStringRGBA();
 	}
 
+	protected calculateBorderColor(): string {
+		return this.borderColor.toStringRGBA();
+	}
+
 	protected calculateTextColor(): string {
 		return this.textColor.toStringRGBA();
 	}
@@ -152,7 +160,11 @@ export default class UIElement extends CanvasNode{
 		let offset = this.calculateOffset(ctx);
 
 		ctx.fillStyle = this.calculateBackgroundColor();
-		ctx.fillRect(this.position.x - origin.x, this.position.y - origin.y, this.size.x, this.size.y);
+		ctx.fillRoundedRect(this.position.x - origin.x, this.position.y - origin.y, this.size.x, this.size.y, this.borderRadius);
+		
+		ctx.strokeStyle = this.calculateBorderColor();
+		ctx.lineWidth = this.borderWidth;
+		ctx.strokeRoundedRect(this.position.x - origin.x, this.position.y - origin.y, this.size.x, this.size.y, this.borderRadius);
 
 		ctx.fillStyle = this.calculateTextColor();
 		ctx.fillText(this.text, this.position.x + offset.x - origin.x, this.position.y + offset.y - origin.y);

src/index.d.ts

@@ -0,0 +1,9 @@
+export {};
+
+declare global {
+	interface CanvasRenderingContext2D {
+		roundedRect(x: number, y: number, w: number, h: number, r: number): void
+		strokeRoundedRect(x: number, y: number, w: number, h: number, r: number): void
+		fillRoundedRect(x: number, y: number, w: number, h: number, r: number): void
+	}
+}

src/main.ts

@@ -5,6 +5,7 @@ import UIElement from "./Nodes/UIElement";
 import ColoredCircle from "./Nodes/ColoredCircle";
 import Color from "./Utils/Color";
 import Button from "./Nodes/UIElements/Button";
+import {} from "./index";
 
 function main(){
     // Create the game object
@@ -100,4 +101,42 @@ function main(){
     game.start();
 }
 
+CanvasRenderingContext2D.prototype.roundedRect = function(x: number, y: number, w: number, h: number, r: number): void {
+    // Clamp the radius between 0 and the min of the width or height
+    if(r < 0) r = 0;
+    if(r > Math.min(w, h)) r = Math.min(w, h);
+
+    // Draw the rounded rect
+    this.beginPath();
+
+    // Top
+    this.moveTo(x + r, y);
+    this.lineTo(x + w - r, y);
+    this.arcTo(x + w, y, x + w, y + r, r);
+
+    // Right
+    this.lineTo(x + w, y + h - r);
+    this.arcTo(x + w, y + h, x + w - r, y + h, r);
+
+    // Bottom
+    this.lineTo(x + r, y + h);
+    this.arcTo(x, y + h, x, y + h - r, r);
+
+    // Left
+    this.lineTo(x, y + r);
+    this.arcTo(x, y, x + r, y, r)
+
+    this.closePath();
+}
+
+CanvasRenderingContext2D.prototype.strokeRoundedRect = function(x, y, w, h, r){
+    this.roundedRect(x, y, w, h, r);
+    this.stroke();
+}
+
+CanvasRenderingContext2D.prototype.fillRoundedRect = function(x, y, w, h, r){
+    this.roundedRect(x, y, w, h, r);
+    this.fill();
+}  
+
 main();