📌 Using HTML and CSS on top of the canvas

In addition to the native UI objects (UIText, UIButton, UIImage, UIInputField), the engine allows developers to create their own real HTML and CSS elements on top of the canvas.

This opens the door to buttons, menus, sliders, inputs, and anything you can build using modern HTML.

🔧 Example: creating HTML buttons on top of the canvas

// ========================
// HTML Multi-Button Script
// ========================

/* global canvas */

function Start(obj) {
  obj._buttons = [];

  const labels = ["↖ Top-Left", "↗ Top-Right", "↙ Bottom-Left", "↘ Bottom-Right", "◎ Center"];

  for (let i = 0; i < labels.length; i++) {
    const btn = document.createElement("button");
    btn.innerText = labels[i];
    btn.style.position = "absolute";
    btn.style.zIndex = 1000;
    btn.style.padding = "6px 12px";
    btn.style.borderRadius = "6px";
    btn.style.border = "1px solid #444";
    btn.style.background = "#2196f3";
    btn.style.color = "white";
    btn.style.cursor = "pointer";

    btn.onclick = () => alert(`Button pressed: ${labels[i]}`);

    document.body.appendChild(btn);
    obj._buttons.push(btn);
  }
}

function Update(obj, dt) {
  if (!obj._buttons) return;

  const rect = canvas.getBoundingClientRect();

  const w = 100;
  const h = 40;

  const positions = [
    { x: rect.left, y: rect.top },                                // top-left
    { x: rect.right - w, y: rect.top },                           // top-right
    { x: rect.left, y: rect.bottom - h },                         // bottom-left
    { x: rect.right - w, y: rect.bottom - h },                    // bottom-right
    { x: rect.left + rect.width / 2 - w / 2, y: rect.top + rect.height / 2 - h / 2 } // center
  ];

  obj._buttons.forEach((btn, i) => {
    btn.style.left = positions[i].x + "px";
    btn.style.top = positions[i].y + "px";
    btn.style.width = w + "px";
    btn.style.height = h + "px";
  });
}

function OnDestroy(obj) {
  if (obj._buttons) {
    obj._buttons.forEach(btn => btn.remove());
    obj._buttons = null;
  }
}

📖 How to use it

1. Save this script as HTMLButtons.js in your game's scripts folder.
2. In the editor, assign this script to any object (for example, a MANAGER object).
3. When running the scene, you’ll see five HTML buttons positioned in the corners and the center of the canvas.

🎨 Customization

• You can change CSS styles in the script (background, font-size, box-shadow, etc.).
• You can replace the alert(...) with engine calls such as sendMessage(obj, "OnClick").
• You can create any HTML element (div, input, select, etc.).