Display — Drawing Primitives

M5GFX source: lgfx/v1/LGFXBase.hpp
Back to: Display overview

All primitives draw with the color set by setColor(). Every draw function has a fill counterpart and an overload accepting an explicit color as the last parameter.

`drawPixel()`

void drawPixel(int32_t x, int32_t y);
void drawPixel(int32_t x, int32_t y, uint16_t color);

Draws a single pixel.

Parameter	Type	Description
`x`	`int32_t`	X coordinate
`y`	`int32_t`	Y coordinate
`color` (optional)	`uint16_t`	Overrides current color

// Using current color
M5Cardputer.Display.setColor(TFT_RED);
M5Cardputer.Display.drawPixel(100, 50);

// With explicit color
M5Cardputer.Display.drawPixel(100, 51, TFT_GREEN);

// Scatter random pixels
for (int i = 0; i < 500; i++) {
    int x = random(320);
    int y = random(240);
    M5Cardputer.Display.drawPixel(x, y, TFT_WHITE);
}

`drawLine()`

void drawLine(int32_t x0, int32_t y0, int32_t x1, int32_t y1);
void drawLine(int32_t x0, int32_t y0, int32_t x1, int32_t y1, uint16_t color);

Draws a line between two points.

Parameter	Type	Description
`x0, y0`	`int32_t`	Start point
`x1, y1`	`int32_t`	End point
`color` (optional)	`uint16_t`	Line color

// Crosshair
int cx = 160, cy = 120;
M5Cardputer.Display.drawLine(cx - 30, cy, cx + 30, cy, TFT_RED);
M5Cardputer.Display.drawLine(cx, cy - 30, cx, cy + 30, TFT_RED);

`drawFastHLine()` / `drawFastVLine()`

void drawFastHLine(int32_t x, int32_t y, int32_t w);
void drawFastVLine(int32_t x, int32_t y, int32_t h);

Optimized horizontal or vertical line. No diagonal support — use drawLine() for those.

Parameter	Type	Description
`x, y`	`int32_t`	Start point
`w` / `h`	`int32_t`	Width (horizontal) or height (vertical)

// Grid lines
for (int i = 0; i < 320; i += 40)
    M5Cardputer.Display.drawFastVLine(i, 0, 240, TFT_DARKGREY);
for (int i = 0; i < 240; i += 40)
    M5Cardputer.Display.drawFastHLine(0, i, 320, TFT_DARKGREY);

`drawRect()` / `fillRect()`

void drawRect(int32_t x, int32_t y, int32_t w, int32_t h);
void drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint16_t color);

void fillRect(int32_t x, int32_t y, int32_t w, int32_t h);
void fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint16_t color);

Rectangle outline or filled rectangle.

Parameter	Type	Description
`x, y`	`int32_t`	Top-left corner
`w`	`int32_t`	Width in pixels
`h`	`int32_t`	Height in pixels

// Button widget
M5Cardputer.Display.fillRoundRect(60, 90, 200, 60, 12, TFT_BLUE);
M5Cardputer.Display.drawRoundRect(60, 90, 200, 60, 12, TFT_WHITE);
M5Cardputer.Display.drawCenterString("CLICK ME", 160, 105);

`drawRoundRect()` / `fillRoundRect()`

void drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r);
void drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r, uint16_t color);

void fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r);
void fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r, uint16_t color);

Rounded rectangle.

Parameter	Type	Description
`r`	`int32_t`	Corner radius

// Panel with rounded corners
M5Cardputer.Display.fillRoundRect(10, 10, 300, 50, 10, TFT_NAVY);

`drawCircle()` / `fillCircle()`

void drawCircle(int32_t x, int32_t y, int32_t r);
void drawCircle(int32_t x, int32_t y, int32_t r, uint16_t color);

void fillCircle(int32_t x, int32_t y, int32_t r);
void fillCircle(int32_t x, int32_t y, int32_t r, uint16_t color);

Parameter	Type	Description
`x, y`	`int32_t`	Center point
`r`	`int32_t`	Radius

// Traffic light
M5Cardputer.Display.fillCircle(50, 50, 20, TFT_RED);
M5Cardputer.Display.fillCircle(50, 100, 20, TFT_YELLOW);
M5Cardputer.Display.fillCircle(50, 150, 20, TFT_GREEN);
M5Cardputer.Display.drawRect(25, 25, 50, 150, TFT_DARKGREY);

`drawEllipse()` / `fillEllipse()`

void drawEllipse(int32_t x, int32_t y, int32_t rx, int32_t ry);
void drawEllipse(int32_t x, int32_t y, int32_t rx, int32_t ry, uint16_t color);

void fillEllipse(int32_t x, int32_t y, int32_t rx, int32_t ry);
void fillEllipse(int32_t x, int32_t y, int32_t rx, int32_t ry, uint16_t color);

Parameter	Type	Description
`x, y`	`int32_t`	Center
`rx`	`int32_t`	Horizontal radius
`ry`	`int32_t`	Vertical radius

// Eye shape
M5Cardputer.Display.fillEllipse(100, 100, 30, 15, TFT_CYAN);
M5Cardputer.Display.fillEllipse(200, 100, 30, 15, TFT_CYAN);
M5Cardputer.Display.fillCircle(100, 100, 8, TFT_WHITE);
M5Cardputer.Display.fillCircle(200, 100, 8, TFT_WHITE);

`drawTriangle()` / `fillTriangle()`

void drawTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2);
void drawTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2, uint16_t color);

void fillTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2);
void fillTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2, uint16_t color);

Parameter	Type	Description
`x0,y0` to `x2,y2`	`int32_t`	Three vertices

// Play button arrow
M5Cardputer.Display.fillTriangle(140, 90, 140, 150, 190, 120, TFT_GREEN);

`drawArc()` / `fillArc()`

void drawArc(int32_t x, int32_t y, int32_t r0, int32_t r1, float angle0, float angle1);
void drawArc(int32_t x, int32_t y, int32_t r0, int32_t r1, float angle0, float angle1, uint16_t color);

void fillArc(int32_t x, int32_t y, int32_t r0, int32_t r1, float angle0, float angle1);
void fillArc(int32_t x, int32_t y, int32_t r0, int32_t r1, float angle0, float angle1, uint16_t color);

Arc between inner radius r0 and outer radius r1, from angle angle0 to angle1 (degrees).

Parameter	Type	Description
`x, y`	`int32_t`	Center
`r0`	`int32_t`	Inner radius
`r1`	`int32_t`	Outer radius
`angle0`	`float`	Start angle (degrees)
`angle1`	`float`	End angle (degrees)

// Half-circle gauge (0 to 180 degrees)
M5Cardputer.Display.fillArc(160, 120, 40, 60, 0, 180, TFT_CYAN);

// Thin arc line (r0 == r1)
M5Cardputer.Display.drawArc(160, 120, 65, 65, 0, 270, TFT_YELLOW);

`drawBezier()` — Quadratic

void drawBezier(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2);
void drawBezier(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2, uint16_t color);

Quadratic Bezier curve with one control point.

Parameter	Type	Description
`x0,y0`	`int32_t`	Start point
`x1,y1`	`int32_t`	Control point
`x2,y2`	`int32_t`	End point

// S-curve
M5Cardputer.Display.drawBezier(50, 120, 160, 30, 270, 120, TFT_MAGENTA);

`drawBezier()` — Cubic

void drawBezier(int32_t x0, int32_t y0, int32_t x1, int32_t y1,
                int32_t x2, int32_t y2, int32_t x3, int32_t y3);
void drawBezier(int32_t x0, int32_t y0, int32_t x1, int32_t y1,
                int32_t x2, int32_t y2, int32_t x3, int32_t y3, uint16_t color);

Cubic Bezier curve with two control points.

// Smooth wave
M5Cardputer.Display.drawBezier(10, 120, 80, 30, 240, 210, 310, 120, TFT_YELLOW);

`drawSmoothLine()`

void drawSmoothLine(int32_t x0, int32_t y0, int32_t x1, int32_t y1, uint16_t color);

Anti-aliased smooth line (Wu's algorithm).

M5Cardputer.Display.drawSmoothLine(20, 20, 300, 220, TFT_WHITE);

`drawWideLine()`

void drawWideLine(int32_t x0, int32_t y0, int32_t x1, int32_t y1, float r, uint16_t color);

Line with a specified width (radius).

Parameter	Type	Description
`r`	`float`	Line half-width in pixels

M5Cardputer.Display.drawWideLine(10, 50, 310, 200, 5.0f, TFT_BLUE);

`drawSpot()`

void drawSpot(int32_t x, int32_t y, float r, uint16_t color);

Soft glowing circle with radial gradient fade.

// Glowing cursor
M5Cardputer.Display.drawSpot(x, y, 12.0f, TFT_CYAN);

`floodFill()`

void floodFill(int32_t x, int32_t y);
void floodFill(int32_t x, int32_t y, uint16_t color);

Fills a bounded area starting from (x, y), replacing contiguous same-colored pixels.

// Draw outline, then fill interior
M5Cardputer.Display.drawCircle(100, 100, 40, TFT_GREEN);
M5Cardputer.Display.floodFill(100, 100, TFT_GREEN);

Display — Drawing Primitives

drawPixel()

drawLine()

drawFastHLine() / drawFastVLine()

drawRect() / fillRect()

drawRoundRect() / fillRoundRect()

drawCircle() / fillCircle()

drawEllipse() / fillEllipse()

drawTriangle() / fillTriangle()

drawArc() / fillArc()

drawBezier() — Quadratic

drawBezier() — Cubic

drawSmoothLine()

drawWideLine()

drawSpot()

floodFill()