drawing_canvas

A pointer-driven drawing surface. The player draws with their finger or a stylus; strokes are emitted as they complete. Use it for Pictionary, mark-up tasks, signature capture, or anything where the input is a 2D path.

Strokes are normalized to 0..1 relative to the canvas’s bounding box, so the host doesn’t need to know the phone’s resolution.

C# factory

WidgetDefinitions.DrawingCanvas(
    id: "canvas",
    positionX: 0.5f, positionY: 0.5f,
    sizeW: 0.9f, sizeH: 0.7f,
    strokeColor: "#ffffff",
    backgroundColor: "#0b0f19",
    submitLabel: "Done"
);

Wire format

Field	Type	Required	Notes
id	string	yes
type	"drawing_canvas"	yes
position_x, position_y, size_w, size_h	number	no	0..1 anchor + size.
stroke_color	string	no	7-digit hex of the pen.
background_color	string	no	7-digit hex of the canvas.
submit_label	string	no	Submit button label. Default "Submit".

Events

Event type	Payload	Fires when
stroke_progress	{ stroke_id, points: [[x,y]…], seq }	Streamed every ~60ms during a stroke. Useful for live remote drawing.
stroke	{ stroke_id, points: [[x,y]…], color }	Player lifts their finger; stroke is complete.
clear	{}	Player taps the built-in Clear button.
submit	{ strokes: [...] }	Player taps Submit. Carries every stroke since last clear.

For lossy-stream replay (gap-fill in stroke_progress), see RequestResendAsync.

Example

manager.OnInput += (player, evt) =>
{
    if (evt.WidgetId != "canvas") return;
    if (evt.EventType == "stroke")
    {
        var stroke = evt.As<StrokePayload>();
        canvasRenderer.AppendStroke(stroke.Points, stroke.Color);
    }
    else if (evt.EventType == "submit")
    {
        finalDrawing = evt.GetRawJson();
        submissionScreen.Show(player.Id);
    }
};