Drawing Functions

Functions for drawing shapes, gradients, and performing canvas operations.

Basic Shapes

drawRect

Draw a filled rectangle with optional stroke.

drawRect(x, y, width, height, color, strokeColor?)

Example:

drawRect(10, 10, 100, 50, "#3498db", "#2980b9")

drawCircle

Draw a filled circle with optional stroke.

drawCircle(x, y, radius, color, strokeColor?)

Example:

drawCircle(100, 100, 50, "#e74c3c", "#c0392b")

drawLine

Draw a line between two points.

drawLine(x1, y1, x2, y2, color, width)

Example:

drawLine(0, 0, 200, 100, "#2ecc71", 3)

drawEllipse

Draw a filled ellipse with optional stroke.

drawEllipse(x, y, radiusX, radiusY, color, strokeColor?)

Example:

drawEllipse(100, 100, 80, 40, "#9b59b6")

drawPolygon

Draw a filled polygon from an array of points.

drawPolygon(points, color, strokeColor?)

Example:

-- Draw a triangle
local points = {
  {x = 100, y = 10},
  {x = 150, y = 100},
  {x = 50, y = 100}
}
drawPolygon(points, "#f39c12", "#d35400")

drawArc

Draw an arc (partial circle).

drawArc(x, y, radius, startAngle, endAngle, color, strokeColor?)

Example:

-- Draw a quarter circle (0 to PI/2)
drawArc(100, 100, 50, 0, math.pi / 2, "#1abc9c")

Advanced Shapes

drawRoundedRect

Draw a rectangle with rounded corners.

drawRoundedRect(x, y, width, height, radius, color, strokeColor?)

Example:

drawRoundedRect(10, 10, 200, 100, 15, "#3498db", "#2980b9")

drawBezier

Draw a cubic Bezier curve.

drawBezier(x1, y1, cp1x, cp1y, cp2x, cp2y, x2, y2, color, width?)

Example:

drawBezier(10, 100, 50, 10, 150, 10, 190, 100, "#e74c3c", 2)

drawPath

Draw a complex path using SVG-like commands.

drawPath(commands, color, strokeColor?)

Supported Commands:

• M x y - Move to position
• L x y - Line to position
• Q cx cy x y - Quadratic curve
• C c1x c1y c2x c2y x y - Cubic curve
• Z - Close path

Example:

local commands = {
  "M 10 10",      -- Move to (10, 10)
  "L 100 10",     -- Line to (100, 10)
  "L 100 100",    -- Line to (100, 100)
  "Z"             -- Close path
}
drawPath(commands, "#3498db", "#2980b9")

Gradients

drawGradient

Draw a linear gradient.

drawGradient(x, y, width, height, direction, color1, color2)

Example:

drawGradient(0, 0, 200, 100, "horizontal", "#3498db", "#9b59b6")

Canvas Operations

clear

Clear the canvas, optionally with a fill color.

clear(color?)

Example:

-- Clear to transparent
clear()
 
-- Clear to a dark background
clear("#1a1a2e")

save

Save the current canvas state (transforms, clip region, etc.).

save()

restore

Restore a previously saved canvas state.

restore()

translate

Translate (move) the coordinate origin.

translate(x, y)

Example:

save()
translate(100, 50)
drawRect(0, 0, 50, 50, "#3498db")  -- Actually draws at (100, 50)
restore()

rotate

Rotate the canvas around the origin.

rotate(angle)

Example:

save()
translate(100, 100)       -- Move origin to rotation center
rotate(math.pi / 4)       -- Rotate 45 degrees
drawRect(-25, -25, 50, 50, "#e74c3c")  -- Draw centered on origin
restore()

scale

Scale the canvas drawing.

scale(x, y)

Example:

save()
scale(2, 2)  -- Double size
drawRect(10, 10, 50, 50, "#2ecc71")  -- Draws at double size
restore()

setClipRegion

Set a rectangular clipping region. Drawing outside this region will be clipped.

setClipRegion(x, y, width, height)

resetClipRegion

Remove the current clipping region.

resetClipRegion()

setBlendMode

Set the blend mode for drawing operations.

setBlendMode(mode)

Available modes:

• "normal" - Default blending
• "multiply" - Multiply colors (darkens)
• "screen" - Screen colors (lightens)
• "overlay" - Overlay blending
• "darken" - Use darker color
• "lighten" - Use lighter color
• "color-dodge" - Brighten to reflect blend
• "color-burn" - Darken to reflect blend
• "hard-light" - Hard light effect
• "soft-light" - Soft light effect
• "difference" - Absolute difference
• "exclusion" - Similar to difference, lower contrast

setGlobalAlpha

Set the global transparency for all subsequent drawing operations.

setGlobalAlpha(alpha)

Example:

setGlobalAlpha(0.5)  -- 50% transparent
drawRect(10, 10, 100, 100, "#3498db")
setGlobalAlpha(1.0)  -- Reset to fully opaque

Batch Operations

startBatch / endBatch

Batch multiple drawing operations together for improved performance. Useful when drawing many shapes at once.

local batch = startBatch()
-- ... multiple draw calls ...
endBatch(batch)

Example:

local batch = startBatch()
for i = 1, 100 do
  drawRect(i * 5, i * 3, 10, 10, "#3498db")
end
endBatch(batch)

Canvas Dimensions

getCanvasWidth

Get the width of the active widget’s canvas.

local width = getCanvasWidth()

Returns: number - Canvas width in pixels (default: 400)

getCanvasHeight

Get the height of the active widget’s canvas.

local height = getCanvasHeight()

Returns: number - Canvas height in pixels (default: 300)

getCanvasSize

Get both width and height of the active widget’s canvas.

local size = getCanvasSize()
print(size.width, size.height)

Returns: {width: number, height: number} - Canvas dimensions