Canvas Overlay

canvas.set(id, fn)

Registers a render function for the given slot ID. The function is called automatically on every frame redraw. Calling canvas.set again with the same id replaces the previous function.

Parameter	Type	Description
id	string	Unique name for this slot
fn	function	Zero-argument function containing one or more canvas.draw* calls

Returns void

// Static label — draw once, stays until cleared
canvas.set("status", function() {
  canvas.drawText("Macro running", 40, 80, { color: "#FFFFFF", textSize: 36 });
});

// Dynamic cursor — update position each loop iteration
while (!isStopped()) {
  var pos = getPosition("target");
  if (pos !== null) {
    canvas.set("cursor", function() {
      canvas.drawCircle(pos.cx, pos.cy, 40, { color: "#FF4444" });
      canvas.drawText("found", pos.cx - 20, pos.cy - 50, { color: "#FF4444", textSize: 28 });
    });
  }
  wait(100);
}

canvas.clear()

canvas.clear(id)

Removes drawing slots from the overlay. With no argument, all slots are cleared. With an id, only that slot is removed — all others stay visible.

Parameter	Type	Description
id	string (optional)	Slot to remove; omit to clear everything

Returns void

canvas.clear("cursor");   // remove only the cursor slot
canvas.clear();           // remove all slots

canvas.drawCircle(x, y, r, options?)

Draws a circle. Must be called inside a canvas.set callback.

Parameter	Type	Description
x, y	number	Center in screen pixels
r	number	Radius in screen pixels
options	object	Optional paint settings (see Paint options below)

Returns void

canvas.set("dot", function() {
  canvas.drawCircle(540, 960, 30, { color: "#00FF00", alpha: 180 });
});

canvas.drawRect(x, y, w, h, options?)

Draws a rectangle. Must be called inside a canvas.set callback.

Parameter	Type	Description
x, y	number	Top-left corner in screen pixels
w, h	number	Width and height in screen pixels
options	object	Optional paint settings

Returns void

// Highlight a matched object's bounding box
var pos = getPosition("enemy");
if (pos !== null) {
  canvas.set("box", function() {
    canvas.drawRect(pos.x, pos.y, pos.w, pos.h, { color: "#FF4444", strokeWidth: 3 });
  });
}

canvas.drawLine(x1, y1, x2, y2, options?)

Draws a straight line. Must be called inside a canvas.set callback.

Parameter	Type	Description
x1, y1	number	Start point in screen pixels
x2, y2	number	End point in screen pixels
options	object	Optional paint settings

Returns void

canvas.set("divider", function() {
  canvas.drawLine(0, 960, 1080, 960, { color: "#FFFFFF", strokeWidth: 2, alpha: 100 });
});

canvas.drawText(text, x, y, options?)

Draws a text string. The point (x, y) is the left baseline of the text. Must be called inside a canvas.set callback.

Parameter	Type	Description
text	string	Text to render
x, y	number	Left baseline position in screen pixels
options	object	Optional paint settings

Returns void

canvas.set("label", function() {
  canvas.drawText("Step: " + step, 40, 120, { color: "#FFFF00", textSize: 40, bold: true });
});

Paint options

All canvas.draw* functions accept an optional options object. Unrecognised keys are silently ignored.

Option	Type	Default	Description
color	string	"#FFFFFF"	Hex color in "#RRGGBB" or "#AARRGGBB" format
alpha	number	255	Opacity 0–255, applied on top of any alpha encoded in color
fill	boolean	false	true = filled shape, false = outline only
strokeWidth	number	4	Outline thickness in screen pixels, used when fill is false
textSize	number	48	Font size in screen pixels for drawText
bold	boolean	false	Bold typeface for drawText

// Filled semi-transparent red circle
canvas.drawCircle(300, 500, 50, { color: "#FF0000", alpha: 160 });

// Outlined blue rect, 4 px border
canvas.drawRect(100, 200, 300, 150, { color: "#2563EB", strokeWidth: 4 });

// Bold yellow label, 44 px
canvas.drawText("HP: 80%", 40, 100, { color: "#FACC15", textSize: 44, bold: true });

Full example — live match highlight

// Spawn a background thread that keeps the canvas in sync
spawnThread(function() {
  while (!isStopped()) {
    var pos = getPosition("enemy_icon");
    if (pos !== null) {
      canvas.set("highlight", function() {
        canvas.drawRect(pos.x, pos.y, pos.w, pos.h,
          { color: "#FF4444", strokeWidth: 3 });
        canvas.drawText("enemy", pos.x, pos.y - 8,
          { color: "#FF4444", textSize: 28 });
      });
    } else {
      canvas.clear("highlight");
    }
    wait(150);
  }
  canvas.clear();
});

// Main script continues independently
while (!isStopped()) {
  findAndTap("attack_button");
  wait(500);
}