UI Canvas

apps/ui_canvas shows the retained UI’s Canvas capability: a type = "canvas" element is a region the game draws arbitrary primitives into with the Ui.canvas* API — filled rects, thick lines, cubic beziers, and text. The demo draws a small node graph (boxes connected by curved wires with labels) — the exact building blocks the node editor is made of.

What it demonstrates

• A .ui document with a type = "canvas" element (a region with a background colour).
• After Ui.render, the game draws into the canvas in canvas-local design pixels (0, 0 is the canvas’s top-left); the engine maps those to screen through the same letterbox as the rest of the UI.

draw() {
  Ui.render(_doc, 0, 0, Window.getWidth(), Window.getHeight())
  var g = Ui.get(_doc, "graph")            // a canvas element
  // a node box + a bezier "wire" to another node (canvas-local coords, colours 0..1)
  Ui.canvasRect(g, 40, 45, 160, 52, [0.20, 0.24, 0.32, 1.0])
  Ui.canvasText(g, 52, 65, "Idle", 22, [0.92, 0.94, 0.98, 1.0])
  Ui.canvasBezier(g, 200, 70, 270, 70, 270, 150, 340, 150, 3.0, [0.90, 0.72, 0.25, 1.0])
}

The API

Call these on a type = "canvas" element after Ui.render, with canvas-local design-pixel coordinates and [r, g, b, a] (0..1) colours:

• Ui.canvasRect(canvas, x, y, w, h, color) — a filled rectangle.
• Ui.canvasLine(canvas, x0, y0, x1, y1, thickness, color) — a thick line.
• Ui.canvasBezier(canvas, x0, y0, cx0, cy0, cx1, cy1, x1, y1, thickness, color) — a cubic bezier.
• Ui.canvasText(canvas, x, y, text, size, color) — text at (x, y).

Primitives are composited in the retained-UI pass (over panels, under the immediate-mode Gui). This is the capability the node-graph editor uses to draw states and transitions.