Canvas (lv_canvas)

A Canvas inherits from Image and extends it, enabling the user to draw anything. Rectangles, text, images, lines, arcs, etc.

Overview

A Canvas inherits from Image and extends it, enabling the user to draw anything. Rectangles, text, images, lines, arcs, etc. can be drawn here using LVGL's extensive drawing engine.

Parts and Styles

• LV_PART_MAIN Uses the typical background and image style properties.

Usage

Buffer

The Canvas needs a buffer in which to store the drawn image. To assign a buffer to a Canvas, use lv_canvas_set_buffer(canvas, buffer, width, height, LV_COLOR_FORMAT_...).

Where buffer has to be valid for the entire lifecycle of the object created by lv_canvas_create. It can be allocated by using lv_malloc or a statically allocated array.

For example, for a 100x50 ARGB8888 buffer you can use:

• uint8_t* buffer = lv_malloc(100 * 50 * 4)
• static uint8_t buffer[100 * 50 * 4]
• static uint8_t buffer[LV_CANVAS_BUF_SIZE(width, height, bits_per_pixel, stride_in_bytes)]

In case you choose the lv_malloc way, it is up to the programmer to free the memory area, for example, on LV_EVENT_DELETE event.

Canvas supports all the color formats like LV_COLOR_FORMAT_ARGB8888 or LV_COLOR_FORMAT_I2. See the full list in the Color formats section.

Indexed colors

For indexed color formats (LV_COLOR_FORMAT_I1/2/4/8), the palette needs to be populated for all palette indices that will be used using lv_canvas_set_palette(canvas, index, color). For example, the following sets pixels with index==3 to red.

lv_canvas_set_palette(canvas, 3, lv_color_hex(0xff0000))

Drawing

To set an individual pixel's color on the Canvas, use lv_canvas_set_px(canvas, x, y, color, opa). With indexed color formats (LV_COLOR_FORMAT_I1/2/4/8) pass the color index as the color argument by using the blue channel in the color value, e.g. lv_color_make(0, 0, index).

lv_canvas_fill_bg(canvas, lv_color_hex(0x00ff00), LV_OPA_50) fills the whole Canvas to blue with 50% opacity. Note that if the current color format doesn't support colors (e.g. LV_COLOR_FORMAT_A8) the color will be ignored. Similarly, if opacity is not supported (e.g. LV_COLOR_FORMAT_RGB565), it will be ignored.

An array of pixels can be copied to the Canvas with lv_canvas_copy_buf(canvas, canvas_area, src_buf, src_area). The color format of the buffer and Canvas need to match. If the canvas area and source buffer are the same size, the source area can be left NULL.

To draw something to the Canvas use LVGL's draw functions directly. See the examples for more details.

The draw functions can draw to any color format to which LVGL can render. Typically this means LV_COLOR_FORMAT_RGB565, LV_COLOR_FORMAT_RGB888, LV_COLOR_FORMAT_XRGB888, and LV_COLOR_FORMAT_ARGB8888.

Events

No special events are sent by Canvas Widgets.

Keys

No Keys are processed by Canvas Widgets.

Examples

Drawing on the Canvas and rotate

Transparent Canvas with chroma keying

Draw a rectangle to the canvas

Draw a label to the canvas

Draw an arc to the canvas

Draw an image to the canvas

Draw a line to the canvas

Draw a vector graphic to the canvas

Draw a triangle to the canvas

Blur an area on the canvas

Draw Fancy Letter Effects

Draw Fancy Letter Effects 2

API