Drawing Primitives

All drawing happens inside render blocks using draw:: functions.

For polylines, Béziers, arcs, images, rounded rectangles, polygon outlines and 2D transforms, see Creative Drawing Tools.

draw::clear

Clears the entire canvas. Call this at the start of your render block to start fresh each frame. In 2D, omit it to let previous frames persist (useful for trails and accumulation effects).

draw::clear()

No arguments. Clears the full canvas dimensions.

draw::background

Fills the entire canvas with a color.

draw::background(color: $COLOR_BLACK)

Parameter	Type	Default	Description
`color`	Color	`$COLOR_BLACK`	Background color
`gradient`	Gradient	—	Linear gradient, overrides `color`

draw::circle

Draws a filled circle.

draw::circle(x: 400.0, y: 300.0, radius: 50.0, color: $COLOR_RED)

Parameter	Type	Default	Description
`x`	Float	0.0	Center X position
`y`	Float	0.0	Center Y position
`radius`	Float	50.0	Circle radius
`color`	Color	`$COLOR_WHITE`	Fill color
`gradient`	Gradient	—	Linear gradient, overrides `color`
`stroke`	Boolean	false	Draw outline instead of fill
`stroke_width`	Float	1.0	Outline thickness
`stroke_color`	Color	`$COLOR_BLACK`	Outline color

draw::rect

Draws a rectangle.

draw::rect(x: 100.0, y: 200.0, width: 150.0, height: 80.0, color: $COLOR_BLUE, rotation_rad: 0.5)

Parameter	Type	Default	Description
`x`	Float	0.0	Top-left X position
`y`	Float	0.0	Top-left Y position
`width`	Float	100.0	Rectangle width
`height`	Float	100.0	Rectangle height
`corner_radius`	Float	0.0	Nonnegative radius, clamped to half the smaller dimension
`color`	Color	`$COLOR_WHITE`	Fill color
`gradient`	Gradient	—	Linear gradient, overrides `color`
`stroke`	Boolean	false	Draw outline instead of fill
`stroke_width`	Float	1.0	Outline thickness
`stroke_color`	Color	`$COLOR_BLACK`	Outline color
`rotation_rad` / `rotation_deg`	Float	0.0	Rotation around center, in the named unit

draw::polygon

Draws a filled polygon from a list of points.

draw::polygon(
  points: [
    [400.0, 100.0],
    [200.0, 400.0],
    [600.0, 400.0],
  ],
  color: $COLOR_GREEN,
  rotation_rad: 0.0
)

Parameter	Type	Default	Description
`points`	Array	`[]`	Array of `[x, y]` coordinate pairs
`color`	Color	`$COLOR_WHITE`	Fill color
`gradient`	Gradient	—	Linear gradient, overrides `color`
`rotation_rad` / `rotation_deg`	Float	0.0	Rotation around centroid, in the named unit
`stroke`	Boolean	false	Draw outline instead of fill
`stroke_width`	Float	1.0	Outline thickness
`stroke_color`	Color	`$COLOR_BLACK`	Outline color

draw::line

Draws a line between two points.

draw::line(x1: 100.0, y1: 100.0, x2: 700.0, y2: 500.0, color: $COLOR_WHITE, stroke_width: 2.0)

Parameter	Type	Default	Description
`x1`	Float	0.0	Start X
`y1`	Float	0.0	Start Y
`x2`	Float	100.0	End X
`y2`	Float	100.0	End Y
`color`	Color	`$COLOR_WHITE`	Line color
`gradient`	Gradient	—	Linear gradient, overrides `color`
`stroke_width`	Float	1.0	Line thickness

draw::ellipse

Draws an ellipse.

draw::ellipse(x: 400.0, y: 300.0, radius_x: 80.0, radius_y: 40.0, color: $COLOR_PURPLE, rotation_rad: 0.3)

Parameter	Type	Default	Description
`x`	Float	0.0	Center X position
`y`	Float	0.0	Center Y position
`radius_x`	Float	50.0	X radius
`radius_y`	Float	30.0	Y radius
`color`	Color	`$COLOR_WHITE`	Fill color
`gradient`	Gradient	—	Linear gradient, overrides `color`
`stroke`	Boolean	false	Draw outline instead of fill
`stroke_width`	Float	1.0	Outline thickness
`stroke_color`	Color	`$COLOR_BLACK`	Outline color
`rotation_rad` / `rotation_deg`	Float	0.0	Rotation in the named unit

draw::text

Draws text on the canvas.

draw::text(content: "Hello!", x: 350.0, y: 300.0, size: 24.0, color: $COLOR_WHITE)

Parameter	Type	Default	Description
`content`	String	`""`	Text to display
`x`	Float	0.0	X position (baseline left)
`y`	Float	0.0	Y position (baseline)
`size`	Float	16.0	Font size in pixels
`color`	Color	`$COLOR_WHITE`	Text color
`gradient`	Gradient	—	Linear gradient, overrides `color`
`font`	String	`"monospace"`	CSS font family

Coordinate System

Origin (0, 0) is at the top-left corner
X increases to the right
Y increases downward
Positive rotations are clockwise; choose radians or degrees with the argument name

Rotation arguments are mutually exclusive: supply rotation_rad in radians or rotation_deg in degrees. Both default to no rotation when omitted.

Keyboard shortcuts

Visript Reference