I have written a code that would create background image as a button and then show a letter on that button. This should become a virtual keyboard.
I am experiencing weird drawing that looks like this:

I do not see what my mistake is.
The following is the code that I have placed on the canvas object:
(Please note that in the code stated below I have removed most of the buttons to keep this post short):
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class VirtualKeyboard : MonoBehaviour
{
public class vbutton : MonoBehaviour
{
public int index;
public float left;
public float top;
public float width;
public float height;
public string caption;
}
private vbutton pMakeKey(int index, float left, float top, float width, float height, string caption)
{
vbutton newButton = new vbutton();
newButton.index = index;
newButton.left = left;
newButton.top = top;
newButton.width = width;
newButton.height = height;
newButton.caption = caption;
return newButton;
}
public float screenWidth = Screen.width;
public float screenHeight = Screen.height;
public float referenceWidth = 1920f; // Replace with your reference width
public float referenceHeight = 1080f; // Replace with your reference height
public float ratioX;
public float ratioY;
void Start()
{
ratioX = screenWidth / referenceWidth;
ratioY = screenHeight / referenceHeight;
List<vbutton> keys = new List<vbutton>();
keys.Add(pMakeKey(1038, 1028 * ratioX, 141 * ratioY, 57 * ratioX, 43 * ratioY, ""));
keys.Add(pMakeKey(1040, 1028 * ratioX, 185 * ratioY, 57 * ratioX, 43 * ratioY, ""));
// Get the canvas to use as parent for the keyboard keys
Canvas canvas = GetComponent<Canvas>();
for (int i = 0; i < keys.Count; i++)
{
// Create a new GameObject for the key
GameObject key = new GameObject(keys[i].caption);
RectTransform keyRectTransform = key.AddComponent<RectTransform>();
keyRectTransform.SetParent(canvas.transform);
keyRectTransform.SetParent(transform);
keyRectTransform.anchoredPosition = new Vector2(keys[i].left, -keys[i].top);
keyRectTransform.sizeDelta = new Vector2(keys[i].width, keys[i].height);
// Add a Button component to the key
Button button = key.AddComponent<Button>();
// Add a Text component to the key and set its text to the current key string
Text text = key.AddComponent<Text>();
text.text = keys[i].caption;
text.font = Resources.GetBuiltinResource<Font>("Arial.ttf"); // Set the font
text.color = Color.red;
text.fontSize = 24; // Set the font size
text.alignment = TextAnchor.MiddleCenter; // Center the text
// Add a callback function to the button click event
button.onClick.AddListener(() => OnButtonClicked(keys[i].caption));
}
}
void OnButtonClicked(string buttonCaption)
{
Debug.Log("Button " + buttonCaption + " was clicked!");
// Do whatever you need to do when a button is clicked here
}
}
This screenshot shows the properties of the "BackgroundImage" that I use as a background:

And this is what the gameview looks like as well as the Canvas properties:
