Canvas

Rotated RGB565 canvas onto ARGB8888

Render a rounded rectangle and label on an RGB565 canvas, then rotate the result onto an ARGB8888 canvas.

Two 200x150 canvases are centered on the active screen. The first uses LV_COLOR_FORMAT_RGB565 and draws a gradient rounded rectangle with lv_draw_rect and orange text with lv_draw_label. The second uses LV_COLOR_FORMAT_ARGB8888, takes the first canvas as an image via lv_draw_buf_to_image, and blits it with lv_draw_image rotated by 120 degrees around the canvas center.

Per-pixel alpha bands on ARGB8888

Fade horizontal blue bands from 50% to 20% to 0% opacity using lv_canvas_set_px.

The active screen is tinted light red and an 80x40 canvas with LV_COLOR_FORMAT_ARGB8888 is centered on it. The canvas is filled solid blue, then three row bands are overwritten pixel by pixel with lv_canvas_set_px at LV_OPA_50, LV_OPA_20, and LV_OPA_0, so the underlying screen color shows through progressively.

Rectangle with border and outline

Draw a red rounded rectangle with a blue border and a green outline onto a canvas.

A 50x50 LV_COLOR_FORMAT_ARGB8888 canvas is centered and filled with a light grey background. An lv_draw_rect_dsc_t is populated with a red fill, radius 5, a 3 px blue border, and a 2 px green outline at LV_OPA_50, then painted into area 30 via lv_draw_rect on a layer opened with lv_canvas_init_layer.

Underlined label on canvas

Paint a red "Hello" string in Montserrat 18 with an underline decoration onto a canvas.

A 50x50 LV_COLOR_FORMAT_ARGB8888 canvas is centered on the active screen and filled with a light grey background. An lv_draw_label_dsc_t is configured with lv_font_montserrat_18, LV_TEXT_DECOR_UNDERLINE, and red text, then rendered via lv_draw_label inside a canvas layer.

Arc primitive on canvas

Draw a 10 px wide red arc spanning 0 to 220 degrees on a canvas.

A 50x50 LV_COLOR_FORMAT_ARGB8888 canvas is centered with a light grey background. An lv_draw_arc_dsc_t is built with center (25,25), radius 15, width 10, and start_angle/end_angle of 0 and 220, then rendered with lv_draw_arc into a layer opened via lv_canvas_init_layer.

Image blit via raw buffer

Attach a raw ARGB8888 pixel buffer to a canvas and blit a star image into it.

A 50x50 canvas is backed by a static byte buffer sized with LV_CANVAS_BUF_SIZE and bound via lv_canvas_set_buffer in LV_COLOR_FORMAT_ARGB8888. After filling with light grey, the declared img_star image is drawn at offset (10,10) using lv_draw_image on a canvas layer.

Rounded-end line on canvas

Draw a 4 px red line with rounded caps from (15,15) to (35,10) on a canvas.

A 50x50 LV_COLOR_FORMAT_ARGB8888 canvas is centered and filled with light grey. An lv_draw_line_dsc_t is configured with width 4, round_start and round_end set, and endpoints at (15,15) and (35,10), then rendered via lv_draw_line on a canvas layer.

Vector path filled triangle

Build a closed three-point vector path and fill it blue on a canvas.

A 150x150 LV_COLOR_FORMAT_ARGB8888 canvas is centered with light grey background. An lv_vector_path_t at LV_VECTOR_PATH_QUALITY_MEDIUM is traced between (10,10), (130,130), and (10,130) using lv_vector_path_move_to and lv_vector_path_line_to, then closed. An lv_draw_vector_dsc_t with a blue fill color is attached to the path and rendered via lv_draw_vector. When vector graphics are disabled the example falls back to a centered "not enabled" label.

Gradient triangle on canvas

Draw a triangle filled with a vertical red-to-transparent-blue gradient at 50% opacity.

A 150x150 LV_COLOR_FORMAT_ARGB8888 canvas is centered with a light grey background. An lv_draw_triangle_dsc_t is built with vertices at (10,10), (100,30), and (50,100), a LV_GRAD_DIR_VER gradient from red at frac=64 to transparent blue at frac=192, and a top-level opa of 128, then rendered via lv_draw_triangle on a canvas layer.

Frosted glass blur region

Blur a rounded rectangle area of a canvas and overlay a tinted label on it.

A 100x100 LV_COLOR_FORMAT_RGB565 canvas is centered and filled with light grey. An underlined red background label is painted across the canvas. lv_draw_blur is then called over area 70 with an lv_draw_blur_dsc_t whose blur_radius is 8 and corner_radius is 10. A 30% opacity blue rounded fill and a black centered "Hello world" label are layered on top of the blurred region.

Animated wave text on canvas

Draw a rainbow string on a sine wave, redrawn each frame for a sliding effect.

A 300x200 LV_COLOR_FORMAT_ARGB8888 canvas is centered on the active screen. A 16 ms lv_timer clears the canvas to white and walks the characters of a fixed string along y = sin(x) * 40, offset by a counter. Each letter is rendered with lv_draw_letter using its tangent as rotation and an HSV-derived color.

Windstorm text along a curve

Scatter characters along an amplitude-growing sine curve, redrawn per frame with shifting colors.

A 300x200 LV_COLOR_FORMAT_ARGB8888 canvas is centered on the active screen. A 16 ms lv_timer clears the canvas to white and places each letter of a fixed string on a curve whose X uses cos and whose Y blends index-scaled sin with the counter, producing a spreading windstorm shape. Letters are drawn with lv_draw_letter, rotated by the tangent and colored via lv_color_hsv_to_rgb.