[lvgl] Implement canvas widget (#8504)

tests/components/lvgl/lvgl-package.yaml

@@ -130,6 +130,10 @@ lvgl:
           on_click:
             then:
               - lvgl.widget.hide: message_box
+              - lvgl.style.update:
+                  id: style_test
+                  bg_color: blue
+                  bg_opa: !lambda return 0.5;
     - id: simple_msgbox
       title: Simple
 
@@ -510,6 +514,110 @@ lvgl:
 
     - id: page2
       widgets:
+        - canvas:
+            id: canvas_id
+            align: center
+            width: 400
+            height: 400
+            transparent: true
+            on_boot:
+              - lvgl.canvas.fill:
+                  color: blue
+                  opa: 50%
+              - lvgl.canvas.draw_rectangle:
+                  x: 20
+                  y: 20
+                  width: 150
+                  height: 150
+                  bg_color: green
+                  bg_opa: cover
+                  radius: 5
+                  border_color: black
+                  border_width: 4
+                  border_opa: 80%
+                  shadow_color: black
+                  shadow_width: 10
+                  shadow_ofs_x: 5
+                  shadow_ofs_y: 5
+                  shadow_spread: 4
+                  shadow_opa: cover
+                  outline_color: red
+                  outline_width: 4
+                  outline_pad: 4
+                  outline_opa: cover
+              - lvgl.canvas.set_pixels:
+                  color: red
+                  points:
+                    - x: 100
+                      y: 100
+                    - 100,101
+                    - 100,102
+                    - 100,103
+                    - 100,104
+              - lvgl.canvas.set_pixels:
+                  opa: 50%
+                  color: !lambda return lv_color_make(255,255,255);
+                  points:
+                    - x: !lambda return random_uint32() % 200;
+                      y: !lambda return random_uint32() % 200;
+                    - 121,120
+                    - 122,120
+                    - 123,120
+                    - 124,120
+                    - 125,120
+
+              - lvgl.canvas.draw_text:
+                  x: 100
+                  y: 100
+                  font: montserrat_18
+                  color: white
+                  opa: cover
+                  decor: underline
+                  letter_space: 1
+                  line_space: 2
+                  text: Canvas Text
+                  align: center
+                  max_width: 150
+              - lvgl.canvas.draw_image:
+                  src: cat_image
+                  x: 100
+                  y: 100
+                  angle: 90
+                  zoom: 2.0
+                  pivot_x: 25
+                  pivot_y: 25
+              - lvgl.canvas.draw_line:
+                  color: blue
+                  width: 4
+                  round_end: true
+                  round_start: false
+                  points:
+                    - 50,50
+                    - 50, 200
+                    - 200, 200
+                    - 200, 50
+                    - 50,50
+              - lvgl.canvas.draw_polygon:
+                  bg_color: teal
+                  border_color: white
+                  border_width: 2
+                  border_opa: cover
+                  points:
+                    - 150,150
+                    - 150, 300
+                    - 300, 300
+                    - 350, 250
+              - lvgl.canvas.draw_arc:
+                  x: 200
+                  y: 200
+                  radius: 40
+                  opa: 50%
+                  color: purple
+                  width: 6
+                  rounded: true
+                  start_angle: 10
+                  end_angle: !lambda return 900;
+
         - qrcode:
             id: lv_qr
             align: left_mid