Added button function and added new canvas backend function

src/backend/document/canvas.go

@@ -29,6 +29,10 @@ func (c *canvas) IsNull() bool {
 	return c.canvas.IsNull()
 }
 
+func (c *canvas) AddEventListener(ev string, fn js.Func) {
+	js.Global().Get("window").Call("addEventListener", ev, fn)
+}
+
 func (c *context) Set(key string, value interface{}) {
 	c.context.Set(key, value)
 }

src/webzen/entity/entity.go

@@ -4,27 +4,27 @@
 package entity
 
 import (
-  "github.com/dimkauzh/webzen/src/webzen/image"
-  "github.com/dimkauzh/webzen/src/webzen/shape"
+    "github.com/dimkauzh/webzen/src/webzen/image"
+    "github.com/dimkauzh/webzen/src/webzen/shape"
 )
 
 type Entity struct {
-  x      int
-  y      int
-  width  int
-  height int
-  image  image.Image
-  rect   shape.Rect
+    x      int
+    y      int
+    width  int
+    height int
+    image  image.Image
+    rect   shape.Rect
 }
 
 func NewEntity(x int, y int, width int, height int) Entity {
-  return Entity{x, y, width, height, nil, nil}
+    return Entity{x, y, width, height, nil, nil}
 }
 
 func (e *Entity) SetImage(image image.Image) {
-  e.image = image
+    e.image = image
 }
 
 func (e *Entity) SetRect(rect shape.Rect) {
-  e.rect = rect
+    e.rect = rect
 }

src/webzen/ui/button.go

@@ -0,0 +1,48 @@
+//go:build js && wasm
+// +build js,wasm
+
+package ui
+
+import (
+	"strconv"
+	"syscall/js"
+
+	"github.com/dimkauzh/webzen/src/backend/colors"
+	"github.com/dimkauzh/webzen/src/backend/document"
+)
+
+var buttonClicked = false
+
+func NewButton(text string, textSize int, x, y, width, height float64, clickCallback func()) {
+	canvas := document.GetElementById("webzen")
+	context := canvas.GetContext("2d")
+
+	rgba := colors.GetRGBA([4]int{146, 255, 123, 255})
+
+	context.Set("fillStyle", rgba)
+	context.FillRect(x, y, width, height)
+
+	textX := x + width/2 - float64(textSize*len(text)/4)
+	textY := y + height/2 + float64(textSize)/3
+
+	context.Set("font", strconv.Itoa(textSize)+"px Arial")
+	context.Set("fillStyle", "black")
+	context.FillText(text, textX, textY)
+
+	if !buttonClicked {
+		canvas.AddEventListener("click", js.FuncOf(func(this js.Value, p []js.Value) interface{} {
+			// Check if the click event occurred within the button area
+			mouseEvent := p[0]
+			mouseX := mouseEvent.Get("offsetX").Int()
+			mouseY := mouseEvent.Get("offsetY").Int()
+
+			if mouseX >= int(x) && mouseX <= int(x)+int(width) && mouseY >= int(y) && mouseY <= int(y)+int(height) {
+				// Call the provided clickCallback function when the button area is clicked
+				clickCallback()
+			}
+			return nil
+		}))
+
+		buttonClicked = true
+	}
+}

src/webzen/vector/vector.go

@@ -4,10 +4,10 @@
 package vector
 
 type Vector2D struct {
-  x int
-  y int
+    x int
+    y int
 }
 
 func NewVector2D(x, y int) Vector2D {
-  return Vector2D{x, y}
+    return Vector2D{x, y}
 }

tests/test1/test1.go

@@ -1,11 +1,11 @@
 package main
 
 import (
-
 	"github.com/dimkauzh/webzen/src/webzen"
 	"github.com/dimkauzh/webzen/src/webzen/draw"
 	"github.com/dimkauzh/webzen/src/webzen/keys"
 	"github.com/dimkauzh/webzen/src/webzen/tools"
+	"github.com/dimkauzh/webzen/src/webzen/ui"
 )
 
 func main() {
@@ -15,9 +15,14 @@ func main() {
 		draw.DrawText("Hello under the world!", 21, 100, 100)
 		draw.DrawRect(50, 500, 400, 400, [4]int{146, 255, 123, 255})
 		draw.DrawRect(200, 200, 100, 400, [4]int{146, 255, 123, 255})
+
+		ui.NewButton("texting rrnrrh", 10, 100, 100, 200, 100, func() {
+			tools.Print("Button pressed")
+		})
+
 		if keys.KeyPressed("a") {
 			tools.Print("A key pressed")
 		}
-    webzen.Update()
+		webzen.Update()
 	}
 }