Implement `Canvas` support for `iced_tiny_skia`

65 files changed, 1350 insertions, 566 deletions

diff --git a/core/Cargo.toml b/core/Cargo.toml
index 43865e4d..7ccb7b7a 100644
--- a/core/Cargo.toml
+++ b/core/Cargo.toml
@@ -9,6 +9,7 @@ repository = "https://github.com/iced-rs/iced"
 
 [dependencies]
 bitflags = "1.2"
+thiserror = "1"
 
 [dependencies.palette]
 version = "0.6"
diff --git a/graphics/src/gradient.rs b/core/src/gradient.rs
index 61e919d6..61e919d6 100644
--- a/graphics/src/gradient.rs
+++ b/core/src/gradient.rs
diff --git a/graphics/src/gradient/linear.rs b/core/src/gradient/linear.rs
index c886db47..c886db47 100644
--- a/graphics/src/gradient/linear.rs
+++ b/core/src/gradient/linear.rs
diff --git a/core/src/lib.rs b/core/src/lib.rs
index d7314851..1e4f0411 100644
--- a/core/src/lib.rs
+++ b/core/src/lib.rs
@@ -26,6 +26,7 @@
 #![allow(clippy::inherent_to_string, clippy::type_complexity)]
 pub mod alignment;
 pub mod font;
+pub mod gradient;
 pub mod keyboard;
 pub mod mouse;
 pub mod time;
@@ -46,6 +47,7 @@ pub use background::Background;
 pub use color::Color;
 pub use content_fit::ContentFit;
 pub use font::Font;
+pub use gradient::Gradient;
 pub use length::Length;
 pub use padding::Padding;
 pub use pixels::Pixels;
diff --git a/examples/arc/src/main.rs b/examples/arc/src/main.rs
index 7b6ea0e1..d71ba6f6 100644
--- a/examples/arc/src/main.rs
+++ b/examples/arc/src/main.rs
@@ -5,8 +5,8 @@ use iced::widget::canvas::{
     self, stroke, Cache, Canvas, Cursor, Geometry, Path, Stroke,
 };
 use iced::{
-    Application, Command, Element, Length, Point, Rectangle, Settings,
-    Subscription, Theme,
+    Application, Command, Element, Length, Point, Rectangle, Renderer,
+    Settings, Subscription, Theme,
 };
 
 pub fn main() -> iced::Result {
@@ -69,17 +69,18 @@ impl Application for Arc {
     }
 }
 
-impl<Message> canvas::Program<Message> for Arc {
+impl<Message> canvas::Program<Message, Renderer> for Arc {
     type State = ();
 
     fn draw(
         &self,
         _state: &Self::State,
+        renderer: &Renderer,
         theme: &Theme,
         bounds: Rectangle,
         _cursor: Cursor,
     ) -> Vec<Geometry> {
-        let geometry = self.cache.draw(bounds.size(), |frame| {
+        let geometry = self.cache.draw(renderer, bounds.size(), |frame| {
             let palette = theme.palette();
 
             let center = frame.center();
diff --git a/examples/bezier_tool/src/main.rs b/examples/bezier_tool/src/main.rs
index 7c3916d4..5bb463c3 100644
--- a/examples/bezier_tool/src/main.rs
+++ b/examples/bezier_tool/src/main.rs
@@ -64,7 +64,7 @@ mod bezier {
     use iced::widget::canvas::{
         self, Canvas, Cursor, Frame, Geometry, Path, Stroke,
     };
-    use iced::{Element, Length, Point, Rectangle, Theme};
+    use iced::{Element, Length, Point, Rectangle, Renderer, Theme};
 
     #[derive(Default)]
     pub struct State {
@@ -92,7 +92,7 @@ mod bezier {
         curves: &'a [Curve],
     }
 
-    impl<'a> canvas::Program<Curve> for Bezier<'a> {
+    impl<'a> canvas::Program<Curve, Renderer> for Bezier<'a> {
         type State = Option<Pending>;
 
         fn update(
@@ -152,22 +152,26 @@ mod bezier {
         fn draw(
             &self,
             state: &Self::State,
+            renderer: &Renderer,
             _theme: &Theme,
             bounds: Rectangle,
             cursor: Cursor,
         ) -> Vec<Geometry> {
-            let content =
-                self.state.cache.draw(bounds.size(), |frame: &mut Frame| {
+            let content = self.state.cache.draw(
+                renderer,
+                bounds.size(),
+                |frame: &mut Frame| {
                     Curve::draw_all(self.curves, frame);
 
                     frame.stroke(
                         &Path::rectangle(Point::ORIGIN, frame.size()),
                         Stroke::default().with_width(2.0),
                     );
-                });
+                },
+            );
 
             if let Some(pending) = state {
-                let pending_curve = pending.draw(bounds, cursor);
+                let pending_curve = pending.draw(renderer, bounds, cursor);
 
                 vec![content, pending_curve]
             } else {
@@ -216,8 +220,13 @@ mod bezier {
     }
 
     impl Pending {
-        fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Geometry {
-            let mut frame = Frame::new(bounds.size());
+        fn draw(
+            &self,
+            renderer: &Renderer,
+            bounds: Rectangle,
+            cursor: Cursor,
+        ) -> Geometry {
+            let mut frame = Frame::new(renderer, bounds.size());
 
             if let Some(cursor_position) = cursor.position_in(&bounds) {
                 match *self {
diff --git a/examples/clock/src/main.rs b/examples/clock/src/main.rs
index a389c54f..6425e2da 100644
--- a/examples/clock/src/main.rs
+++ b/examples/clock/src/main.rs
@@ -4,8 +4,8 @@ use iced::widget::canvas::{
 };
 use iced::widget::{canvas, container};
 use iced::{
-    Application, Color, Command, Element, Length, Point, Rectangle, Settings,
-    Subscription, Theme, Vector,
+    Application, Color, Command, Element, Length, Point, Rectangle, Renderer,
+    Settings, Subscription, Theme, Vector,
 };
 
 pub fn main() -> iced::Result {
@@ -83,17 +83,18 @@ impl Application for Clock {
     }
 }
 
-impl<Message> canvas::Program<Message> for Clock {
+impl<Message> canvas::Program<Message, Renderer> for Clock {
     type State = ();
 
     fn draw(
         &self,
         _state: &Self::State,
+        renderer: &Renderer,
         _theme: &Theme,
         bounds: Rectangle,
         _cursor: Cursor,
     ) -> Vec<Geometry> {
-        let clock = self.clock.draw(bounds.size(), |frame| {
+        let clock = self.clock.draw(renderer, bounds.size(), |frame| {
             let center = frame.center();
             let radius = frame.width().min(frame.height()) / 2.0;
 
diff --git a/examples/color_palette/src/main.rs b/examples/color_palette/src/main.rs
index a2df36c2..1109a883 100644
--- a/examples/color_palette/src/main.rs
+++ b/examples/color_palette/src/main.rs
@@ -1,8 +1,8 @@
 use iced::widget::canvas::{self, Canvas, Cursor, Frame, Geometry, Path};
 use iced::widget::{column, row, text, Slider};
 use iced::{
-    alignment, Alignment, Color, Element, Length, Point, Rectangle, Sandbox,
-    Settings, Size, Vector,
+    alignment, Alignment, Color, Element, Length, Point, Rectangle, Renderer,
+    Sandbox, Settings, Size, Vector,
 };
 use palette::{self, convert::FromColor, Hsl, Srgb};
 use std::marker::PhantomData;
@@ -237,17 +237,18 @@ impl Theme {
     }
 }
 
-impl<Message> canvas::Program<Message> for Theme {
+impl<Message> canvas::Program<Message, Renderer> for Theme {
     type State = ();
 
     fn draw(
         &self,
         _state: &Self::State,
+        renderer: &Renderer,
         _theme: &iced::Theme,
         bounds: Rectangle,
         _cursor: Cursor,
     ) -> Vec<Geometry> {
-        let theme = self.canvas_cache.draw(bounds.size(), |frame| {
+        let theme = self.canvas_cache.draw(renderer, bounds.size(), |frame| {
             self.draw(frame);
         });
 
diff --git a/examples/game_of_life/src/main.rs b/examples/game_of_life/src/main.rs
index ed911160..494f71a6 100644
--- a/examples/game_of_life/src/main.rs
+++ b/examples/game_of_life/src/main.rs
@@ -211,8 +211,8 @@ mod grid {
         Cache, Canvas, Cursor, Frame, Geometry, Path, Text,
     };
     use iced::{
-        alignment, mouse, Color, Element, Length, Point, Rectangle, Size,
-        Theme, Vector,
+        alignment, mouse, Color, Element, Length, Point, Rectangle, Renderer,
+        Size, Theme, Vector,
     };
     use rustc_hash::{FxHashMap, FxHashSet};
     use std::future::Future;
@@ -393,7 +393,7 @@ mod grid {
         }
     }
 
-    impl canvas::Program<Message> for Grid {
+    impl canvas::Program<Message, Renderer> for Grid {
         type State = Interaction;
 
         fn update(
@@ -536,13 +536,14 @@ mod grid {
         fn draw(
             &self,
             _interaction: &Interaction,
+            renderer: &Renderer,
             _theme: &Theme,
             bounds: Rectangle,
             cursor: Cursor,
         ) -> Vec<Geometry> {
             let center = Vector::new(bounds.width / 2.0, bounds.height / 2.0);
 
-            let life = self.life_cache.draw(bounds.size(), |frame| {
+            let life = self.life_cache.draw(renderer, bounds.size(), |frame| {
                 let background = Path::rectangle(Point::ORIGIN, frame.size());
                 frame.fill(&background, Color::from_rgb8(0x40, 0x44, 0x4B));
 
@@ -565,7 +566,7 @@ mod grid {
             });
 
             let overlay = {
-                let mut frame = Frame::new(bounds.size());
+                let mut frame = Frame::new(renderer, bounds.size());
 
                 let hovered_cell =
                     cursor.position_in(&bounds).map(|position| {
@@ -626,38 +627,40 @@ mod grid {
             if self.scaling < 0.2 || !self.show_lines {
                 vec![life, overlay]
             } else {
-                let grid = self.grid_cache.draw(bounds.size(), |frame| {
-                    frame.translate(center);
-                    frame.scale(self.scaling);
-                    frame.translate(self.translation);
-                    frame.scale(Cell::SIZE as f32);
-
-                    let region = self.visible_region(frame.size());
-                    let rows = region.rows();
-                    let columns = region.columns();
-                    let (total_rows, total_columns) =
-                        (rows.clone().count(), columns.clone().count());
-                    let width = 2.0 / Cell::SIZE as f32;
-                    let color = Color::from_rgb8(70, 74, 83);
-
-                    frame.translate(Vector::new(-width / 2.0, -width / 2.0));
+                let grid =
+                    self.grid_cache.draw(renderer, bounds.size(), |frame| {
+                        frame.translate(center);
+                        frame.scale(self.scaling);
+                        frame.translate(self.translation);
+                        frame.scale(Cell::SIZE as f32);
 
-                    for row in region.rows() {
-                        frame.fill_rectangle(
-                            Point::new(*columns.start() as f32, row as f32),
-                            Size::new(total_columns as f32, width),
-                            color,
-                        );
-                    }
+                        let region = self.visible_region(frame.size());
+                        let rows = region.rows();
+                        let columns = region.columns();
+                        let (total_rows, total_columns) =
+                            (rows.clone().count(), columns.clone().count());
+                        let width = 2.0 / Cell::SIZE as f32;
+                        let color = Color::from_rgb8(70, 74, 83);
+
+                        frame
+                            .translate(Vector::new(-width / 2.0, -width / 2.0));
+
+                        for row in region.rows() {
+                            frame.fill_rectangle(
+                                Point::new(*columns.start() as f32, row as f32),
+                                Size::new(total_columns as f32, width),
+                                color,
+                            );
+                        }
 
-                    for column in region.columns() {
-                        frame.fill_rectangle(
-                            Point::new(column as f32, *rows.start() as f32),
-                            Size::new(width, total_rows as f32),
-                            color,
-                        );
-                    }
-                });
+                        for column in region.columns() {
+                            frame.fill_rectangle(
+                                Point::new(column as f32, *rows.start() as f32),
+                                Size::new(width, total_rows as f32),
+                                color,
+                            );
+                        }
+                    });
 
                 vec![life, grid, overlay]
             }
diff --git a/examples/geometry/src/main.rs b/examples/geometry/src/main.rs
index 9bacce7f..a77772d5 100644
--- a/examples/geometry/src/main.rs
+++ b/examples/geometry/src/main.rs
@@ -10,9 +10,9 @@ mod rainbow {
     // Of course, you can choose to make the implementation renderer-agnostic,
     // if you wish to, by creating your own `Renderer` trait, which could be
     // implemented by `iced_wgpu` and other renderers.
+    use iced_graphics::primitive::{ColoredVertex2D, Primitive};
     use iced_graphics::renderer::{self, Renderer};
-    use iced_graphics::triangle::ColoredVertex2D;
-    use iced_graphics::{Backend, Primitive};
+    use iced_graphics::Backend;
 
     use iced_native::layout;
     use iced_native::widget::{self, Widget};
@@ -59,7 +59,7 @@ mod rainbow {
             cursor_position: Point,
             _viewport: &Rectangle,
         ) {
-            use iced_graphics::triangle::Mesh2D;
+            use iced_graphics::primitive::Mesh2D;
             use iced_native::Renderer as _;
 
             let b = layout.bounds();
diff --git a/examples/modern_art/src/main.rs b/examples/modern_art/src/main.rs
index 28ed3e21..a43a2b2b 100644
--- a/examples/modern_art/src/main.rs
+++ b/examples/modern_art/src/main.rs
@@ -55,17 +55,18 @@ impl Application for ModernArt {
     }
 }
 
-impl<Message> canvas::Program<Message> for ModernArt {
+impl<Message> canvas::Program<Message, Renderer> for ModernArt {
     type State = ();
 
     fn draw(
         &self,
         _state: &Self::State,
+        renderer: &Renderer,
         _theme: &Theme,
         bounds: Rectangle,
         _cursor: Cursor,
     ) -> Vec<Geometry> {
-        let geometry = self.cache.draw(bounds.size(), |frame| {
+        let geometry = self.cache.draw(renderer, bounds.size(), |frame| {
             let num_squares = thread_rng().gen_range(0..1200);
 
             let mut i = 0;
diff --git a/examples/multitouch/src/main.rs b/examples/multitouch/src/main.rs
index f5faae0f..7df6c929 100644
--- a/examples/multitouch/src/main.rs
+++ b/examples/multitouch/src/main.rs
@@ -6,7 +6,7 @@ use iced::widget::canvas::stroke::{self, Stroke};
 use iced::widget::canvas::{self, Canvas, Cursor, Geometry};
 use iced::{
     executor, touch, window, Application, Color, Command, Element, Length,
-    Point, Rectangle, Settings, Subscription, Theme,
+    Point, Rectangle, Renderer, Settings, Subscription, Theme,
 };
 
 use std::collections::HashMap;
@@ -95,7 +95,7 @@ impl Application for Multitouch {
     }
 }
 
-impl canvas::Program<Message> for State {
+impl canvas::Program<Message, Renderer> for State {
     type State = ();
 
     fn update(
@@ -125,11 +125,12 @@ impl canvas::Program<Message> for State {
     fn draw(
         &self,
         _state: &Self::State,
+        renderer: &Renderer,
         _theme: &Theme,
         bounds: Rectangle,
         _cursor: Cursor,
     ) -> Vec<Geometry> {
-        let fingerweb = self.cache.draw(bounds.size(), |frame| {
+        let fingerweb = self.cache.draw(renderer, bounds.size(), |frame| {
             if self.fingers.len() < 2 {
                 return;
             }
diff --git a/examples/sierpinski_triangle/src/main.rs b/examples/sierpinski_triangle/src/main.rs
index 1d25d171..e85f8391 100644
--- a/examples/sierpinski_triangle/src/main.rs
+++ b/examples/sierpinski_triangle/src/main.rs
@@ -5,8 +5,8 @@ use iced::widget::canvas::event::{self, Event};
 use iced::widget::canvas::{self, Canvas};
 use iced::widget::{column, row, slider, text};
 use iced::{
-    Application, Color, Command, Length, Point, Rectangle, Settings, Size,
-    Theme,
+    Application, Color, Command, Length, Point, Rectangle, Renderer, Settings,
+    Size, Theme,
 };
 
 use rand::Rng;
@@ -97,7 +97,7 @@ struct SierpinskiGraph {
     cache: canvas::Cache,
 }
 
-impl canvas::Program<Message> for SierpinskiGraph {
+impl canvas::Program<Message, Renderer> for SierpinskiGraph {
     type State = ();
 
     fn update(
@@ -134,11 +134,12 @@ impl canvas::Program<Message> for SierpinskiGraph {
     fn draw(
         &self,
         _state: &Self::State,
+        renderer: &Renderer,
         _theme: &Theme,
         bounds: Rectangle,
         _cursor: canvas::Cursor,
     ) -> Vec<canvas::Geometry> {
-        let geom = self.cache.draw(bounds.size(), |frame| {
+        let geom = self.cache.draw(renderer, bounds.size(), |frame| {
             frame.stroke(
                 &canvas::Path::rectangle(Point::ORIGIN, frame.size()),
                 canvas::Stroke::default(),
diff --git a/examples/solar_system/src/main.rs b/examples/solar_system/src/main.rs
index 9a4ee754..0023a69b 100644
--- a/examples/solar_system/src/main.rs
+++ b/examples/solar_system/src/main.rs
@@ -15,8 +15,8 @@ use iced::widget::canvas::stroke::{self, Stroke};
 use iced::widget::canvas::{Cursor, Path};
 use iced::window;
 use iced::{
-    Application, Color, Command, Element, Length, Point, Rectangle, Settings,
-    Size, Subscription, Vector,
+    Application, Color, Command, Element, Length, Point, Rectangle, Renderer,
+    Settings, Size, Subscription, Vector,
 };
 
 use std::time::Instant;
@@ -150,30 +150,32 @@ impl State {
     }
 }
 
-impl<Message> canvas::Program<Message> for State {
+impl<Message> canvas::Program<Message, Renderer> for State {
     type State = ();
 
     fn draw(
         &self,
         _state: &Self::State,
+        renderer: &Renderer,
         _theme: &Theme,
         bounds: Rectangle,
         _cursor: Cursor,
     ) -> Vec<canvas::Geometry> {
         use std::f32::consts::PI;
 
-        let background = self.space_cache.draw(bounds.size(), |frame| {
-            let stars = Path::new(|path| {
-                for (p, size) in &self.stars {
-                    path.rectangle(*p, Size::new(*size, *size));
-                }
-            });
+        let background =
+            self.space_cache.draw(renderer, bounds.size(), |frame| {
+                let stars = Path::new(|path| {
+                    for (p, size) in &self.stars {
+                        path.rectangle(*p, Size::new(*size, *size));
+                    }
+                });
 
-            frame.translate(frame.center() - Point::ORIGIN);
-            frame.fill(&stars, Color::WHITE);
-        });
+                frame.translate(frame.center() - Point::ORIGIN);
+                frame.fill(&stars, Color::WHITE);
+            });
 
-        let system = self.system_cache.draw(bounds.size(), |frame| {
+        let system = self.system_cache.draw(renderer, bounds.size(), |frame| {
             let center = frame.center();
 
             let sun = Path::circle(center, Self::SUN_RADIUS);
diff --git a/graphics/Cargo.toml b/graphics/Cargo.toml
index 9795d31f..36d8a516 100644
--- a/graphics/Cargo.toml
+++ b/graphics/Cargo.toml
@@ -24,8 +24,7 @@ bmp = ["image_rs/bmp"]
 hdr = ["image_rs/hdr"]
 dds = ["image_rs/dds"]
 farbfeld = ["image_rs/farbfeld"]
-canvas = ["lyon"]
-qr_code = ["qrcode", "canvas"]
+canvas = ["iced_native/canvas"]
 opengl = []
 image_rs = ["kamadak-exif"]
 
@@ -35,6 +34,7 @@ log = "0.4"
 raw-window-handle = "0.5"
 thiserror = "1.0"
 bitflags = "1.2"
+tiny-skia = "0.8"
 
 [dependencies.bytemuck]
 version = "1.4"
@@ -48,15 +48,6 @@ path = "../native"
 version = "0.7"
 path = "../style"
 
-[dependencies.lyon]
-version = "1.0"
-optional = true
-
-[dependencies.qrcode]
-version = "0.12"
-optional = true
-default-features = false
-
 [dependencies.image_rs]
 version = "0.24"
 package = "image"
diff --git a/graphics/src/backend.rs b/graphics/src/backend.rs
index 8658cffe..c44372e8 100644
--- a/graphics/src/backend.rs
+++ b/graphics/src/backend.rs
@@ -10,6 +10,8 @@ use std::borrow::Cow;
 ///
 /// [`Renderer`]: crate::Renderer
 pub trait Backend {
+    type Geometry: Into<crate::Primitive>;
+
     /// Trims the measurements cache.
     ///
     /// This method is currently necessary to properly trim the text cache in
diff --git a/graphics/src/lib.rs b/graphics/src/lib.rs
index bbbdfa0e..576b2d78 100644
--- a/graphics/src/lib.rs
+++ b/graphics/src/lib.rs
@@ -9,7 +9,7 @@
 )]
 #![deny(
     missing_debug_implementations,
-    missing_docs,
+    //missing_docs,
     unsafe_code,
     unused_results,
     clippy::extra_unused_lifetimes,
@@ -23,25 +23,19 @@
 #![cfg_attr(docsrs, feature(doc_cfg))]
 mod antialiasing;
 mod error;
-mod primitive;
 mod transformation;
 mod viewport;
 
 pub mod backend;
-pub mod gradient;
 pub mod image;
-pub mod layer;
 pub mod overlay;
+pub mod primitive;
 pub mod renderer;
-pub mod triangle;
-pub mod widget;
 pub mod window;
 
 pub use antialiasing::Antialiasing;
 pub use backend::Backend;
 pub use error::Error;
-pub use gradient::Gradient;
-pub use layer::Layer;
 pub use primitive::Primitive;
 pub use renderer::Renderer;
 pub use transformation::Transformation;
@@ -50,5 +44,6 @@ pub use viewport::Viewport;
 pub use iced_native::alignment;
 pub use iced_native::text;
 pub use iced_native::{
-    Alignment, Background, Color, Font, Point, Rectangle, Size, Vector,
+    Alignment, Background, Color, Font, Gradient, Point, Rectangle, Size,
+    Vector,
 };
diff --git a/graphics/src/primitive.rs b/graphics/src/primitive.rs
index 5a163a2f..e4826591 100644
--- a/graphics/src/primitive.rs
+++ b/graphics/src/primitive.rs
@@ -1,23 +1,15 @@
+use crate::alignment;
+
 use iced_native::image;
 use iced_native::svg;
-use iced_native::{Background, Color, Font, Rectangle, Size, Vector};
-
-use crate::alignment;
-use crate::gradient::Gradient;
-use crate::triangle;
+use iced_native::{Background, Color, Font, Gradient, Rectangle, Size, Vector};
 
+use bytemuck::{Pod, Zeroable};
 use std::sync::Arc;
 
 /// A rendering primitive.
 #[derive(Debug, Clone)]
 pub enum Primitive {
-    /// An empty primitive
-    None,
-    /// A group of primitives
-    Group {
-        /// The primitives of the group
-        primitives: Vec<Primitive>,
-    },
     /// A text primitive
     Text {
         /// The contents of the text
@@ -66,27 +58,12 @@ pub enum Primitive {
         /// The bounds of the viewport
         bounds: Rectangle,
     },
-    /// A clip primitive
-    Clip {
-        /// The bounds of the clip
-        bounds: Rectangle,
-        /// The content of the clip
-        content: Box<Primitive>,
-    },
-    /// A primitive that applies a translation
-    Translate {
-        /// The translation vector
-        translation: Vector,
-
-        /// The primitive to translate
-        content: Box<Primitive>,
-    },
     /// A low-level primitive to render a mesh of triangles with a solid color.
     ///
     /// It can be used to render many kinds of geometry freely.
     SolidMesh {
         /// The vertices and indices of the mesh.
-        buffers: triangle::Mesh2D<triangle::ColoredVertex2D>,
+        buffers: Mesh2D<ColoredVertex2D>,
 
         /// The size of the drawable region of the mesh.
         ///
@@ -98,7 +75,7 @@ pub enum Primitive {
     /// It can be used to render many kinds of geometry freely.
     GradientMesh {
         /// The vertices and indices of the mesh.
-        buffers: triangle::Mesh2D<triangle::Vertex2D>,
+        buffers: Mesh2D<Vertex2D>,
 
         /// The size of the drawable region of the mesh.
         ///
@@ -108,18 +85,101 @@ pub enum Primitive {
         /// The [`Gradient`] to apply to the mesh.
         gradient: Gradient,
     },
+    Fill {
+        path: tiny_skia::Path,
+        paint: tiny_skia::Paint<'static>,
+        rule: tiny_skia::FillRule,
+        transform: tiny_skia::Transform,
+    },
+    Stroke {
+        path: tiny_skia::Path,
+        paint: tiny_skia::Paint<'static>,
+        stroke: tiny_skia::Stroke,
+        transform: tiny_skia::Transform,
+    },
+    /// A group of primitives
+    Group {
+        /// The primitives of the group
+        primitives: Vec<Primitive>,
+    },
+    /// A clip primitive
+    Clip {
+        /// The bounds of the clip
+        bounds: Rectangle,
+        /// The content of the clip
+        content: Box<Primitive>,
+    },
+    /// A primitive that applies a translation
+    Translate {
+        /// The translation vector
+        translation: Vector,
+
+        /// The primitive to translate
+        content: Box<Primitive>,
+    },
     /// A cached primitive.
     ///
     /// This can be useful if you are implementing a widget where primitive
     /// generation is expensive.
-    Cached {
+    Cache {
         /// The cached primitive
-        cache: Arc<Primitive>,
+        content: Arc<Primitive>,
     },
 }
 
-impl Default for Primitive {
-    fn default() -> Primitive {
-        Primitive::None
+impl Primitive {
+    pub fn group(primitives: Vec<Self>) -> Self {
+        Self::Group { primitives }
+    }
+
+    pub fn clip(self, bounds: Rectangle) -> Self {
+        Self::Clip {
+            bounds,
+            content: Box::new(self),
+        }
+    }
+
+    pub fn translate(self, translation: Vector) -> Self {
+        Self::Translate {
+            translation,
+            content: Box::new(self),
+        }
+    }
+}
+
+/// A set of [`Vertex2D`] and indices representing a list of triangles.
+#[derive(Clone, Debug)]
+pub struct Mesh2D<T> {
+    /// The vertices of the mesh
+    pub vertices: Vec<T>,
+
+    /// The list of vertex indices that defines the triangles of the mesh.
+    ///
+    /// Therefore, this list should always have a length that is a multiple of 3.
+    pub indices: Vec<u32>,
+}
+
+/// A two-dimensional vertex.
+#[derive(Copy, Clone, Debug, Zeroable, Pod)]
+#[repr(C)]
+pub struct Vertex2D {
+    /// The vertex position in 2D space.
+    pub position: [f32; 2],
+}
+
+/// A two-dimensional vertex with a color.
+#[derive(Copy, Clone, Debug, Zeroable, Pod)]
+#[repr(C)]
+pub struct ColoredVertex2D {
+    /// The vertex position in 2D space.
+    pub position: [f32; 2],
+
+    /// The color of the vertex in __linear__ RGBA.
+    pub color: [f32; 4],
+}
+
+impl From<()> for Primitive {
+    fn from(_: ()) -> Self {
+        Self::Group { primitives: vec![] }
     }
 }
diff --git a/graphics/src/renderer.rs b/graphics/src/renderer.rs
index 859ebc04..793ee7d7 100644
--- a/graphics/src/renderer.rs
+++ b/graphics/src/renderer.rs
@@ -1,6 +1,7 @@
 //! Create a renderer from a [`Backend`].
 use crate::backend::{self, Backend};
 use crate::{Primitive, Vector};
+
 use iced_native::image;
 use iced_native::layout;
 use iced_native::renderer;
@@ -70,19 +71,13 @@ where
     }
 
     fn with_layer(&mut self, bounds: Rectangle, f: impl FnOnce(&mut Self)) {
-        let current_primitives = std::mem::take(&mut self.primitives);
+        let current = std::mem::take(&mut self.primitives);
 
         f(self);
 
-        let layer_primitives =
-            std::mem::replace(&mut self.primitives, current_primitives);
+        let layer = std::mem::replace(&mut self.primitives, current);
 
-        self.primitives.push(Primitive::Clip {
-            bounds,
-            content: Box::new(Primitive::Group {
-                primitives: layer_primitives,
-            }),
-        });
+        self.primitives.push(Primitive::group(layer).clip(bounds));
     }
 
     fn with_translation(
@@ -90,19 +85,14 @@ where
         translation: Vector,
         f: impl FnOnce(&mut Self),
     ) {
-        let current_primitives = std::mem::take(&mut self.primitives);
+        let current = std::mem::take(&mut self.primitives);
 
         f(self);
 
-        let layer_primitives =
-            std::mem::replace(&mut self.primitives, current_primitives);
+        let layer = std::mem::replace(&mut self.primitives, current);
 
-        self.primitives.push(Primitive::Translate {
-            translation,
-            content: Box::new(Primitive::Group {
-                primitives: layer_primitives,
-            }),
-        });
+        self.primitives
+            .push(Primitive::group(layer).translate(translation));
     }
 
     fn fill_quad(
@@ -199,7 +189,7 @@ where
     }
 
     fn draw(&mut self, handle: image::Handle, bounds: Rectangle) {
-        self.draw_primitive(Primitive::Image { handle, bounds })
+        self.primitives.push(Primitive::Image { handle, bounds })
     }
 }
 
@@ -217,10 +207,23 @@ where
         color: Option<Color>,
         bounds: Rectangle,
     ) {
-        self.draw_primitive(Primitive::Svg {
+        self.primitives.push(Primitive::Svg {
             handle,
             color,
             bounds,
         })
     }
 }
+
+#[cfg(feature = "canvas")]
+impl<B, T> iced_native::widget::canvas::Renderer for Renderer<B, T>
+where
+    B: Backend,
+{
+    type Geometry = B::Geometry;
+
+    fn draw(&mut self, layers: Vec<Self::Geometry>) {
+        self.primitives
+            .extend(layers.into_iter().map(B::Geometry::into));
+    }
+}
diff --git a/graphics/src/triangle.rs b/graphics/src/triangle.rs
index f52b2339..09b61767 100644
--- a/graphics/src/triangle.rs
+++ b/graphics/src/triangle.rs
@@ -1,33 +1 @@
 //! Draw geometry using meshes of triangles.
-use bytemuck::{Pod, Zeroable};
-
-/// A set of [`Vertex2D`] and indices representing a list of triangles.
-#[derive(Clone, Debug)]
-pub struct Mesh2D<T> {
-    /// The vertices of the mesh
-    pub vertices: Vec<T>,
-
-    /// The list of vertex indices that defines the triangles of the mesh.
-    ///
-    /// Therefore, this list should always have a length that is a multiple of 3.
-    pub indices: Vec<u32>,
-}
-
-/// A two-dimensional vertex.
-#[derive(Copy, Clone, Debug, Zeroable, Pod)]
-#[repr(C)]
-pub struct Vertex2D {
-    /// The vertex position in 2D space.
-    pub position: [f32; 2],
-}
-
-/// A two-dimensional vertex with a color.
-#[derive(Copy, Clone, Debug, Zeroable, Pod)]
-#[repr(C)]
-pub struct ColoredVertex2D {
-    /// The vertex position in 2D space.
-    pub position: [f32; 2],
-
-    /// The color of the vertex in __linear__ RGBA.
-    pub color: [f32; 4],
-}
diff --git a/native/Cargo.toml b/native/Cargo.toml
index 3f92783e..23533e33 100644
--- a/native/Cargo.toml
+++ b/native/Cargo.toml
@@ -8,12 +8,14 @@ license = "MIT"
 repository = "https://github.com/iced-rs/iced"
 
 [features]
+canvas = ["lyon_path"]
 debug = []
 
 [dependencies]
 twox-hash = { version = "1.5", default-features = false }
 unicode-segmentation = "1.6"
 num-traits = "0.2"
+thiserror = "1"
 
 [dependencies.iced_core]
 version = "0.8"
@@ -27,3 +29,7 @@ features = ["thread-pool"]
 [dependencies.iced_style]
 version = "0.7"
 path = "../style"
+
+[dependencies.lyon_path]
+version = "1"
+optional = true
diff --git a/native/src/lib.rs b/native/src/lib.rs
index 27b6fc0d..c98827e7 100644
--- a/native/src/lib.rs
+++ b/native/src/lib.rs
@@ -33,7 +33,7 @@
 )]
 #![deny(
     missing_debug_implementations,
-    missing_docs,
+    //missing_docs,
     unused_results,
     clippy::extra_unused_lifetimes,
     clippy::from_over_into,
@@ -79,6 +79,7 @@ mod debug;
 mod debug;
 
 pub use iced_core::alignment;
+pub use iced_core::gradient;
 pub use iced_core::time;
 pub use iced_core::{
     color, Alignment, Background, Color, ContentFit, Length, Padding, Pixels,
@@ -97,6 +98,7 @@ pub use debug::Debug;
 pub use element::Element;
 pub use event::Event;
 pub use font::Font;
+pub use gradient::Gradient;
 pub use hasher::Hasher;
 pub use layout::Layout;
 pub use overlay::Overlay;
diff --git a/native/src/widget.rs b/native/src/widget.rs
index 2b3ca7be..27330894 100644
--- a/native/src/widget.rs
+++ b/native/src/widget.rs
@@ -83,6 +83,22 @@ pub use tree::Tree;
 #[doc(no_inline)]
 pub use vertical_slider::VerticalSlider;
 
+#[cfg(feature = "canvas")]
+#[cfg_attr(docsrs, doc(cfg(feature = "canvas")))]
+pub mod canvas;
+
+#[cfg(feature = "canvas")]
+#[doc(no_inline)]
+pub use canvas::Canvas;
+
+#[cfg(feature = "qr_code")]
+#[cfg_attr(docsrs, doc(cfg(feature = "qr_code")))]
+pub mod qr_code;
+
+#[cfg(feature = "qr_code")]
+#[doc(no_inline)]
+pub use qr_code::QRCode;
+
 pub use action::Action;
 pub use id::Id;
 pub use operation::Operation;
diff --git a/graphics/src/widget/canvas.rs b/native/src/widget/canvas.rs
index a8d050f5..8a9addd2 100644
--- a/graphics/src/widget/canvas.rs
+++ b/native/src/widget/canvas.rs
@@ -8,34 +8,26 @@ pub mod fill;
 pub mod path;
 pub mod stroke;
 
-mod cache;
 mod cursor;
-mod frame;
-mod geometry;
 mod program;
 mod style;
 mod text;
 
 pub use crate::gradient::{self, Gradient};
-pub use cache::Cache;
 pub use cursor::Cursor;
 pub use event::Event;
-pub use fill::{Fill, FillRule};
-pub use frame::Frame;
-pub use geometry::Geometry;
+pub use fill::Fill;
 pub use path::Path;
 pub use program::Program;
 pub use stroke::{LineCap, LineDash, LineJoin, Stroke};
 pub use style::Style;
 pub use text::Text;
 
-use crate::{Backend, Primitive, Renderer};
-
-use iced_native::layout::{self, Layout};
-use iced_native::mouse;
-use iced_native::renderer;
-use iced_native::widget::tree::{self, Tree};
-use iced_native::{
+use crate::layout::{self, Layout};
+use crate::mouse;
+use crate::renderer;
+use crate::widget::tree::{self, Tree};
+use crate::{
     Clipboard, Element, Length, Point, Rectangle, Shell, Size, Vector, Widget,
 };
 
@@ -85,20 +77,22 @@ use std::marker::PhantomData;
 /// let canvas = Canvas::new(Circle { radius: 50.0 });
 /// ```
 #[derive(Debug)]
-pub struct Canvas<Message, Theme, P>
+pub struct Canvas<Message, Renderer, P>
 where
-    P: Program<Message, Theme>,
+    Renderer: self::Renderer,
+    P: Program<Message, Renderer>,
 {
     width: Length,
     height: Length,
     program: P,
     message_: PhantomData<Message>,
-    theme_: PhantomData<Theme>,
+    theme_: PhantomData<Renderer>,
 }
 
-impl<Message, Theme, P> Canvas<Message, Theme, P>
+impl<Message, Renderer, P> Canvas<Message, Renderer, P>
 where
-    P: Program<Message, Theme>,
+    Renderer: self::Renderer,
+    P: Program<Message, Renderer>,
 {
     const DEFAULT_SIZE: f32 = 100.0;
 
@@ -126,10 +120,11 @@ where
     }
 }
 
-impl<Message, P, B, T> Widget<Message, Renderer<B, T>> for Canvas<Message, T, P>
+impl<Message, Renderer, P> Widget<Message, Renderer>
+    for Canvas<Message, Renderer, P>
 where
-    P: Program<Message, T>,
-    B: Backend,
+    Renderer: self::Renderer,
+    P: Program<Message, Renderer>,
 {
     fn tag(&self) -> tree::Tag {
         struct Tag<T>(T);
@@ -150,7 +145,7 @@ where
 
     fn layout(
         &self,
-        _renderer: &Renderer<B, T>,
+        _renderer: &Renderer,
         limits: &layout::Limits,
     ) -> layout::Node {
         let limits = limits.width(self.width).height(self.height);
@@ -162,23 +157,19 @@ where
     fn on_event(
         &mut self,
         tree: &mut Tree,
-        event: iced_native::Event,
+        event: crate::Event,
         layout: Layout<'_>,
         cursor_position: Point,
-        _renderer: &Renderer<B, T>,
+        _renderer: &Renderer,
         _clipboard: &mut dyn Clipboard,
         shell: &mut Shell<'_, Message>,
     ) -> event::Status {
         let bounds = layout.bounds();
 
         let canvas_event = match event {
-            iced_native::Event::Mouse(mouse_event) => {
-                Some(Event::Mouse(mouse_event))
-            }
-            iced_native::Event::Touch(touch_event) => {
-                Some(Event::Touch(touch_event))
-            }
-            iced_native::Event::Keyboard(keyboard_event) => {
+            crate::Event::Mouse(mouse_event) => Some(Event::Mouse(mouse_event)),
+            crate::Event::Touch(touch_event) => Some(Event::Touch(touch_event)),
+            crate::Event::Keyboard(keyboard_event) => {
                 Some(Event::Keyboard(keyboard_event))
             }
             _ => None,
@@ -208,7 +199,7 @@ where
         layout: Layout<'_>,
         cursor_position: Point,
         _viewport: &Rectangle,
-        _renderer: &Renderer<B, T>,
+        _renderer: &Renderer,
     ) -> mouse::Interaction {
         let bounds = layout.bounds();
         let cursor = Cursor::from_window_position(cursor_position);
@@ -220,49 +211,49 @@ where
     fn draw(
         &self,
         tree: &Tree,
-        renderer: &mut Renderer<B, T>,
-        theme: &T,
+        renderer: &mut Renderer,
+        theme: &Renderer::Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         cursor_position: Point,
         _viewport: &Rectangle,
     ) {
-        use iced_native::Renderer as _;
-
         let bounds = layout.bounds();
 
         if bounds.width < 1.0 || bounds.height < 1.0 {
             return;
         }
 
-        let translation = Vector::new(bounds.x, bounds.y);
         let cursor = Cursor::from_window_position(cursor_position);
         let state = tree.state.downcast_ref::<P::State>();
 
-        renderer.with_translation(translation, |renderer| {
-            renderer.draw_primitive(Primitive::Group {
-                primitives: self
-                    .program
-                    .draw(state, theme, bounds, cursor)
-                    .into_iter()
-                    .map(Geometry::into_primitive)
-                    .collect(),
-            });
-        });
+        renderer.with_translation(
+            Vector::new(bounds.x, bounds.y),
+            |renderer| {
+                renderer.draw(
+                    self.program.draw(state, renderer, theme, bounds, cursor),
+                );
+            },
+        );
     }
 }
 
-impl<'a, Message, P, B, T> From<Canvas<Message, T, P>>
-    for Element<'a, Message, Renderer<B, T>>
+impl<'a, Message, Renderer, P> From<Canvas<Message, Renderer, P>>
+    for Element<'a, Message, Renderer>
 where
     Message: 'a,
-    P: Program<Message, T> + 'a,
-    B: Backend,
-    T: 'a,
+    Renderer: 'a + self::Renderer,
+    P: Program<Message, Renderer> + 'a,
 {
     fn from(
-        canvas: Canvas<Message, T, P>,
-    ) -> Element<'a, Message, Renderer<B, T>> {
+        canvas: Canvas<Message, Renderer, P>,
+    ) -> Element<'a, Message, Renderer> {
         Element::new(canvas)
     }
 }
+
+pub trait Renderer: crate::Renderer {
+    type Geometry;
+
+    fn draw(&mut self, geometry: Vec<Self::Geometry>);
+}
diff --git a/graphics/src/widget/canvas/cursor.rs b/native/src/widget/canvas/cursor.rs
index 9588d129..ef6a7771 100644
--- a/graphics/src/widget/canvas/cursor.rs
+++ b/native/src/widget/canvas/cursor.rs
@@ -1,4 +1,4 @@
-use iced_native::{Point, Rectangle};
+use crate::{Point, Rectangle};
 
 /// The mouse cursor state.
 #[derive(Debug, Clone, Copy, PartialEq)]
diff --git a/graphics/src/widget/canvas/event.rs b/native/src/widget/canvas/event.rs
index 7c733a4d..1d726577 100644
--- a/graphics/src/widget/canvas/event.rs
+++ b/native/src/widget/canvas/event.rs
@@ -1,9 +1,9 @@
 //! Handle events of a canvas.
-use iced_native::keyboard;
-use iced_native::mouse;
-use iced_native::touch;
+use crate::keyboard;
+use crate::mouse;
+use crate::touch;
 
-pub use iced_native::event::Status;
+pub use crate::event::Status;
 
 /// A [`Canvas`] event.
 ///
diff --git a/graphics/src/widget/canvas/fill.rs b/native/src/widget/canvas/fill.rs
index e954ebb5..92b1e47e 100644
--- a/graphics/src/widget/canvas/fill.rs
+++ b/native/src/widget/canvas/fill.rs
@@ -1,5 +1,6 @@
 //! Fill [crate::widget::canvas::Geometry] with a certain style.
-use crate::{Color, Gradient};
+use crate::widget::canvas::Gradient;
+use crate::Color;
 
 pub use crate::widget::canvas::Style;
 
@@ -19,14 +20,14 @@ pub struct Fill {
     /// By default, it is set to `NonZero`.
     ///
     /// [1]: https://www.w3.org/TR/SVG/painting.html#FillRuleProperty
-    pub rule: FillRule,
+    pub rule: Rule,
 }
 
 impl Default for Fill {
     fn default() -> Self {
         Self {
             style: Style::Solid(Color::BLACK),
-            rule: FillRule::NonZero,
+            rule: Rule::NonZero,
         }
     }
 }
@@ -57,16 +58,7 @@ impl From<Gradient> for Fill {
 /// [1]: https://www.w3.org/TR/SVG/painting.html#FillRuleProperty
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 #[allow(missing_docs)]
-pub enum FillRule {
+pub enum Rule {
     NonZero,
     EvenOdd,
 }
-
-impl From<FillRule> for lyon::tessellation::FillRule {
-    fn from(rule: FillRule) -> lyon::tessellation::FillRule {
-        match rule {
-            FillRule::NonZero => lyon::tessellation::FillRule::NonZero,
-            FillRule::EvenOdd => lyon::tessellation::FillRule::EvenOdd,
-        }
-    }
-}
diff --git a/graphics/src/widget/canvas/path.rs b/native/src/widget/canvas/path.rs
index aeb2589e..30c387c5 100644
--- a/graphics/src/widget/canvas/path.rs
+++ b/native/src/widget/canvas/path.rs
@@ -7,18 +7,16 @@ mod builder;
 pub use arc::Arc;
 pub use builder::Builder;
 
-use crate::widget::canvas::LineDash;
+pub use lyon_path;
 
-use iced_native::{Point, Size};
-use lyon::algorithms::walk::{walk_along_path, RepeatedPattern, WalkerEvent};
-use lyon::path::iterator::PathIterator;
+use crate::{Point, Size};
 
 /// An immutable set of points that may or may not be connected.
 ///
 /// A single [`Path`] can represent different kinds of 2D shapes!
 #[derive(Debug, Clone)]
 pub struct Path {
-    raw: lyon::path::Path,
+    raw: lyon_path::Path,
 }
 
 impl Path {
@@ -56,54 +54,14 @@ impl Path {
     }
 
     #[inline]
-    pub(crate) fn raw(&self) -> &lyon::path::Path {
+    pub fn raw(&self) -> &lyon_path::Path {
         &self.raw
     }
 
     #[inline]
-    pub(crate) fn transformed(
-        &self,
-        transform: &lyon::math::Transform,
-    ) -> Path {
+    pub fn transform(&self, transform: &lyon_path::math::Transform) -> Path {
         Path {
             raw: self.raw.clone().transformed(transform),
         }
     }
 }
-
-pub(super) fn dashed(path: &Path, line_dash: LineDash<'_>) -> Path {
-    Path::new(|builder| {
-        let segments_odd = (line_dash.segments.len() % 2 == 1)
-            .then(|| [line_dash.segments, line_dash.segments].concat());
-
-        let mut draw_line = false;
-
-        walk_along_path(
-            path.raw().iter().flattened(0.01),
-            0.0,
-            lyon::tessellation::StrokeOptions::DEFAULT_TOLERANCE,
-            &mut RepeatedPattern {
-                callback: |event: WalkerEvent<'_>| {
-                    let point = Point {
-                        x: event.position.x,
-                        y: event.position.y,
-                    };
-
-                    if draw_line {
-                        builder.line_to(point);
-                    } else {
-                        builder.move_to(point);
-                    }
-
-                    draw_line = !draw_line;
-
-                    true
-                },
-                index: line_dash.offset,
-                intervals: segments_odd
-                    .as_deref()
-                    .unwrap_or(line_dash.segments),
-            },
-        );
-    })
-}
diff --git a/graphics/src/widget/canvas/path/arc.rs b/native/src/widget/canvas/path/arc.rs
index b8e72daf..e0747d3e 100644
--- a/graphics/src/widget/canvas/path/arc.rs
+++ b/native/src/widget/canvas/path/arc.rs
@@ -1,5 +1,5 @@
 //! Build and draw curves.
-use iced_native::{Point, Vector};
+use crate::{Point, Vector};
 
 /// A segment of a differentiable curve.
 #[derive(Debug, Clone, Copy)]
diff --git a/graphics/src/widget/canvas/path/builder.rs b/native/src/widget/canvas/path/builder.rs
index 5121aa68..84fda052 100644
--- a/graphics/src/widget/canvas/path/builder.rs
+++ b/native/src/widget/canvas/path/builder.rs
@@ -1,35 +1,37 @@
 use crate::widget::canvas::path::{arc, Arc, Path};
+use crate::{Point, Size};
 
-use iced_native::{Point, Size};
-use lyon::path::builder::SvgPathBuilder;
+use lyon_path::builder::{self, SvgPathBuilder};
+use lyon_path::geom;
+use lyon_path::math;
 
 /// A [`Path`] builder.
 ///
 /// Once a [`Path`] is built, it can no longer be mutated.
 #[allow(missing_debug_implementations)]
 pub struct Builder {
-    raw: lyon::path::builder::WithSvg<lyon::path::path::BuilderImpl>,
+    raw: builder::WithSvg<lyon_path::path::BuilderImpl>,
 }
 
 impl Builder {
     /// Creates a new [`Builder`].
     pub fn new() -> Builder {
         Builder {
-            raw: lyon::path::Path::builder().with_svg(),
+            raw: lyon_path::Path::builder().with_svg(),
         }
     }
 
     /// Moves the starting point of a new sub-path to the given `Point`.
     #[inline]
     pub fn move_to(&mut self, point: Point) {
-        let _ = self.raw.move_to(lyon::math::Point::new(point.x, point.y));
+        let _ = self.raw.move_to(math::Point::new(point.x, point.y));
     }
 
     /// Connects the last point in the [`Path`] to the given `Point` with a
     /// straight line.
     #[inline]
     pub fn line_to(&mut self, point: Point) {
-        let _ = self.raw.line_to(lyon::math::Point::new(point.x, point.y));
+        let _ = self.raw.line_to(math::Point::new(point.x, point.y));
     }
 
     /// Adds an [`Arc`] to the [`Path`] from `start_angle` to `end_angle` in
@@ -53,8 +55,6 @@ impl Builder {
     /// See [the HTML5 specification of `arcTo`](https://html.spec.whatwg.org/multipage/canvas.html#building-paths:dom-context-2d-arcto)
     /// for more details and examples.
     pub fn arc_to(&mut self, a: Point, b: Point, radius: f32) {
-        use lyon::{math, path};
-
         let start = self.raw.current_position();
         let mid = math::Point::new(a.x, a.y);
         let end = math::Point::new(b.x, b.y);
@@ -92,7 +92,7 @@ impl Builder {
         self.raw.arc_to(
             math::Vector::new(radius, radius),
             math::Angle::radians(0.0),
-            path::ArcFlags {
+            lyon_path::ArcFlags {
                 large_arc: false,
                 sweep,
             },
@@ -102,8 +102,6 @@ impl Builder {
 
     /// Adds an ellipse to the [`Path`] using a clockwise direction.
     pub fn ellipse(&mut self, arc: arc::Elliptical) {
-        use lyon::{geom, math};
-
         let arc = geom::Arc {
             center: math::Point::new(arc.center.x, arc.center.y),
             radii: math::Vector::new(arc.radii.x, arc.radii.y),
@@ -128,8 +126,6 @@ impl Builder {
         control_b: Point,
         to: Point,
     ) {
-        use lyon::math;
-
         let _ = self.raw.cubic_bezier_to(
             math::Point::new(control_a.x, control_a.y),
             math::Point::new(control_b.x, control_b.y),
@@ -141,8 +137,6 @@ impl Builder {
     /// and its end point.
     #[inline]
     pub fn quadratic_curve_to(&mut self, control: Point, to: Point) {
-        use lyon::math;
-
         let _ = self.raw.quadratic_bezier_to(
             math::Point::new(control.x, control.y),
             math::Point::new(to.x, to.y),
diff --git a/graphics/src/widget/canvas/program.rs b/native/src/widget/canvas/program.rs
index 656dbfa6..17a5a137 100644
--- a/graphics/src/widget/canvas/program.rs
+++ b/native/src/widget/canvas/program.rs
@@ -1,6 +1,6 @@
 use crate::widget::canvas::event::{self, Event};
 use crate::widget::canvas::mouse;
-use crate::widget::canvas::{Cursor, Geometry};
+use crate::widget::canvas::{Cursor, Renderer};
 use crate::Rectangle;
 
 /// The state and logic of a [`Canvas`].
@@ -9,7 +9,10 @@ use crate::Rectangle;
 /// application.
 ///
 /// [`Canvas`]: crate::widget::Canvas
-pub trait Program<Message, Theme = iced_native::Theme> {
+pub trait Program<Message, Renderer>
+where
+    Renderer: self::Renderer,
+{
     /// The internal state mutated by the [`Program`].
     type State: Default + 'static;
 
@@ -44,10 +47,11 @@ pub trait Program<Message, Theme = iced_native::Theme> {
     fn draw(
         &self,
         state: &Self::State,
-        theme: &Theme,
+        renderer: &Renderer,
+        theme: &Renderer::Theme,
         bounds: Rectangle,
         cursor: Cursor,
-    ) -> Vec<Geometry>;
+    ) -> Vec<Renderer::Geometry>;
 
     /// Returns the current mouse interaction of the [`Program`].
     ///
@@ -65,9 +69,10 @@ pub trait Program<Message, Theme = iced_native::Theme> {
     }
 }
 
-impl<Message, Theme, T> Program<Message, Theme> for &T
+impl<Message, Renderer, T> Program<Message, Renderer> for &T
 where
-    T: Program<Message, Theme>,
+    Renderer: self::Renderer,
+    T: Program<Message, Renderer>,
 {
     type State = T::State;
 
@@ -84,11 +89,12 @@ where
     fn draw(
         &self,
         state: &Self::State,
-        theme: &Theme,
+        renderer: &Renderer,
+        theme: &Renderer::Theme,
         bounds: Rectangle,
         cursor: Cursor,
-    ) -> Vec<Geometry> {
-        T::draw(self, state, theme, bounds, cursor)
+    ) -> Vec<Renderer::Geometry> {
+        T::draw(self, state, renderer, theme, bounds, cursor)
     }
 
     fn mouse_interaction(
diff --git a/graphics/src/widget/canvas/stroke.rs b/native/src/widget/canvas/stroke.rs
index 4c19251d..ab4727b2 100644
--- a/graphics/src/widget/canvas/stroke.rs
+++ b/native/src/widget/canvas/stroke.rs
@@ -1,7 +1,7 @@
 //! Create lines from a [crate::widget::canvas::Path] and assigns them various attributes/styles.
 pub use crate::widget::canvas::Style;
 
-use iced_native::Color;
+use crate::Color;
 
 /// The style of a stroke.
 #[derive(Debug, Clone)]
@@ -77,16 +77,6 @@ impl Default for LineCap {
     }
 }
 
-impl From<LineCap> for lyon::tessellation::LineCap {
-    fn from(line_cap: LineCap) -> lyon::tessellation::LineCap {
-        match line_cap {
-            LineCap::Butt => lyon::tessellation::LineCap::Butt,
-            LineCap::Square => lyon::tessellation::LineCap::Square,
-            LineCap::Round => lyon::tessellation::LineCap::Round,
-        }
-    }
-}
-
 /// The shape used at the corners of paths or basic shapes when they are
 /// stroked.
 #[derive(Debug, Clone, Copy)]
@@ -105,16 +95,6 @@ impl Default for LineJoin {
     }
 }
 
-impl From<LineJoin> for lyon::tessellation::LineJoin {
-    fn from(line_join: LineJoin) -> lyon::tessellation::LineJoin {
-        match line_join {
-            LineJoin::Miter => lyon::tessellation::LineJoin::Miter,
-            LineJoin::Round => lyon::tessellation::LineJoin::Round,
-            LineJoin::Bevel => lyon::tessellation::LineJoin::Bevel,
-        }
-    }
-}
-
 /// The dash pattern used when stroking the line.
 #[derive(Debug, Clone, Copy, Default)]
 pub struct LineDash<'a> {
diff --git a/graphics/src/widget/canvas/style.rs b/native/src/widget/canvas/style.rs
index 6794f2e7..2642fdb8 100644
--- a/graphics/src/widget/canvas/style.rs
+++ b/native/src/widget/canvas/style.rs
@@ -1,4 +1,5 @@
-use crate::{Color, Gradient};
+use crate::widget::canvas::Gradient;
+use crate::Color;
 
 /// The coloring style of some drawing.
 #[derive(Debug, Clone, PartialEq)]
diff --git a/graphics/src/widget/canvas/text.rs b/native/src/widget/canvas/text.rs
index 8c0b2dfb..8c0b2dfb 100644
--- a/graphics/src/widget/canvas/text.rs
+++ b/native/src/widget/canvas/text.rs
diff --git a/renderer/Cargo.toml b/renderer/Cargo.toml
index 1f21f06b..429b55c2 100644
--- a/renderer/Cargo.toml
+++ b/renderer/Cargo.toml
@@ -6,12 +6,13 @@ edition = "2021"
 [features]
 image = ["iced_wgpu/image", "iced_tiny_skia/image"]
 svg = ["iced_wgpu/svg", "iced_tiny_skia/svg"]
-canvas = ["iced_graphics/canvas"]
-qr_code = ["iced_graphics/qr_code"]
+canvas = ["iced_wgpu/canvas", "iced_tiny_skia/canvas"]
+qr_code = ["canvas", "qrcode"]
 tracing = ["iced_wgpu/tracing"]
 
 [dependencies]
 raw-window-handle = "0.5"
+thiserror = "1"
 
 [dependencies.iced_native]
 version = "0.9"
@@ -30,3 +31,8 @@ iced_wgpu = { version = "0.9", path = "../wgpu" }
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
 iced_wgpu = { version = "0.9", path = "../wgpu", features = ["webgl"] }
+
+[dependencies.qrcode]
+version = "0.12"
+optional = true
+default-features = false
diff --git a/renderer/src/backend.rs b/renderer/src/backend.rs
index b0a409dc..6c0b4e5c 100644
--- a/renderer/src/backend.rs
+++ b/renderer/src/backend.rs
@@ -1,4 +1,4 @@
-use crate::{Font, Point, Size};
+use crate::{Font, Geometry, Point, Size};
 
 use iced_graphics::backend;
 use iced_graphics::text;
@@ -12,6 +12,8 @@ pub enum Backend {
 }
 
 impl iced_graphics::Backend for Backend {
+    type Geometry = Geometry;
+
     fn trim_measurements(&mut self) {
         match self {
             Self::Wgpu(backend) => backend.trim_measurements(),
diff --git a/renderer/src/lib.rs b/renderer/src/lib.rs
index f9bfc373..d9c85e82 100644
--- a/renderer/src/lib.rs
+++ b/renderer/src/lib.rs
@@ -4,11 +4,14 @@ pub mod window;
 mod backend;
 mod settings;
 
+pub use iced_graphics::primitive;
+
 pub use backend::Backend;
+pub use primitive::Primitive;
 pub use settings::Settings;
 
 pub use iced_graphics::{
-    Antialiasing, Color, Error, Font, Point, Size, Viewport,
+    Antialiasing, Color, Error, Font, Point, Rectangle, Size, Vector, Viewport,
 };
 
 /// The default graphics renderer for [`iced`].
@@ -16,3 +19,12 @@ pub use iced_graphics::{
 /// [`iced`]: https://github.com/iced-rs/iced
 pub type Renderer<Theme = iced_native::Theme> =
     iced_graphics::Renderer<Backend, Theme>;
+
+#[derive(Debug, Clone)]
+pub struct Geometry(pub(crate) Primitive);
+
+impl From<Geometry> for Primitive {
+    fn from(geometry: Geometry) -> Self {
+        geometry.0
+    }
+}
diff --git a/renderer/src/widget.rs b/renderer/src/widget.rs
index 417cc06f..6c0c2a83 100644
--- a/renderer/src/widget.rs
+++ b/renderer/src/widget.rs
@@ -1,5 +1,11 @@
-#[cfg(feature = "qr_code")]
-pub use iced_graphics::widget::qr_code;
+#[cfg(feature = "canvas")]
+pub mod canvas;
 
 #[cfg(feature = "canvas")]
-pub use iced_graphics::widget::canvas;
+pub use canvas::Canvas;
+
+#[cfg(feature = "qr_code")]
+pub mod qr_code;
+
+#[cfg(feature = "qr_code")]
+pub use qr_code::QRCode;
diff --git a/renderer/src/widget/canvas.rs b/renderer/src/widget/canvas.rs
new file mode 100644
index 00000000..f40a1097
--- /dev/null
+++ b/renderer/src/widget/canvas.rs
@@ -0,0 +1,177 @@
+mod cache;
+
+pub use cache::Cache;
+
+pub use iced_native::widget::canvas::event::{self, Event};
+pub use iced_native::widget::canvas::fill::{self, Fill};
+pub use iced_native::widget::canvas::gradient::{self, Gradient};
+pub use iced_native::widget::canvas::path::{self, Path};
+pub use iced_native::widget::canvas::stroke::{self, Stroke};
+pub use iced_native::widget::canvas::{
+    Canvas, Cursor, LineCap, LineDash, LineJoin, Program, Renderer, Style, Text,
+};
+
+use crate::{Backend, Point, Rectangle, Size, Vector};
+
+pub use crate::Geometry;
+
+pub enum Frame {
+    Wgpu(iced_wgpu::widget::canvas::Frame),
+    TinySkia(iced_tiny_skia::canvas::Frame),
+}
+
+macro_rules! delegate {
+    ($frame:expr, $name:ident => $body:expr) => {
+        match $frame {
+            Self::Wgpu($name) => $body,
+            Self::TinySkia($name) => $body,
+        }
+    };
+}
+
+impl Frame {
+    pub fn new<Theme>(renderer: &crate::Renderer<Theme>, size: Size) -> Self {
+        match renderer.backend() {
+            Backend::Wgpu(_) => {
+                Frame::Wgpu(iced_wgpu::widget::canvas::Frame::new(size))
+            }
+            Backend::TinySkia(_) => {
+                Frame::TinySkia(iced_tiny_skia::canvas::Frame::new(size))
+            }
+        }
+    }
+
+    /// Returns the width of the [`Frame`].
+    #[inline]
+    pub fn width(&self) -> f32 {
+        delegate!(self, frame => frame.width())
+    }
+
+    /// Returns the height of the [`Frame`].
+    #[inline]
+    pub fn height(&self) -> f32 {
+        delegate!(self, frame => frame.height())
+    }
+
+    /// Returns the dimensions of the [`Frame`].
+    #[inline]
+    pub fn size(&self) -> Size {
+        delegate!(self, frame => frame.size())
+    }
+
+    /// Returns the coordinate of the center of the [`Frame`].
+    #[inline]
+    pub fn center(&self) -> Point {
+        delegate!(self, frame => frame.center())
+    }
+
+    /// Draws the given [`Path`] on the [`Frame`] by filling it with the
+    /// provided style.
+    pub fn fill(&mut self, path: &Path, fill: impl Into<Fill>) {
+        delegate!(self, frame => frame.fill(path, fill));
+    }
+
+    /// Draws an axis-aligned rectangle given its top-left corner coordinate and
+    /// its `Size` on the [`Frame`] by filling it with the provided style.
+    pub fn fill_rectangle(
+        &mut self,
+        top_left: Point,
+        size: Size,
+        fill: impl Into<Fill>,
+    ) {
+        delegate!(self, frame => frame.fill_rectangle(top_left, size, fill));
+    }
+
+    /// Draws the stroke of the given [`Path`] on the [`Frame`] with the
+    /// provided style.
+    pub fn stroke<'a>(&mut self, path: &Path, stroke: impl Into<Stroke<'a>>) {
+        delegate!(self, frame => frame.stroke(path, stroke));
+    }
+
+    /// Draws the characters of the given [`Text`] on the [`Frame`], filling
+    /// them with the given color.
+    ///
+    /// __Warning:__ Text currently does not work well with rotations and scale
+    /// transforms! The position will be correctly transformed, but the
+    /// resulting glyphs will not be rotated or scaled properly.
+    ///
+    /// Additionally, all text will be rendered on top of all the layers of
+    /// a [`Canvas`]. Therefore, it is currently only meant to be used for
+    /// overlays, which is the most common use case.
+    ///
+    /// Support for vectorial text is planned, and should address all these
+    /// limitations.
+    ///
+    /// [`Canvas`]: crate::widget::Canvas
+    pub fn fill_text(&mut self, text: impl Into<Text>) {
+        delegate!(self, frame => frame.fill_text(text));
+    }
+
+    /// Stores the current transform of the [`Frame`] and executes the given
+    /// drawing operations, restoring the transform afterwards.
+    ///
+    /// This method is useful to compose transforms and perform drawing
+    /// operations in different coordinate systems.
+    #[inline]
+    pub fn with_save(&mut self, f: impl FnOnce(&mut Frame)) {
+        delegate!(self, frame => frame.push_transform());
+
+        f(self);
+
+        delegate!(self, frame => frame.pop_transform());
+    }
+
+    /// Executes the given drawing operations within a [`Rectangle`] region,
+    /// clipping any geometry that overflows its bounds. Any transformations
+    /// performed are local to the provided closure.
+    ///
+    /// This method is useful to perform drawing operations that need to be
+    /// clipped.
+    #[inline]
+    pub fn with_clip(&mut self, region: Rectangle, f: impl FnOnce(&mut Frame)) {
+        let mut frame = match self {
+            Self::Wgpu(_) => {
+                Self::Wgpu(iced_wgpu::widget::canvas::Frame::new(region.size()))
+            }
+            Self::TinySkia(_) => Self::TinySkia(
+                iced_tiny_skia::canvas::Frame::new(region.size()),
+            ),
+        };
+
+        f(&mut frame);
+
+        let translation = Vector::new(region.x, region.y);
+
+        match (self, frame) {
+            (Self::Wgpu(target), Self::Wgpu(frame)) => {
+                target.clip(frame, translation);
+            }
+            (Self::TinySkia(target), Self::TinySkia(frame)) => {
+                target.clip(frame, translation);
+            }
+            _ => unreachable!(),
+        };
+    }
+
+    /// Applies a translation to the current transform of the [`Frame`].
+    #[inline]
+    pub fn translate(&mut self, translation: Vector) {
+        delegate!(self, frame => frame.translate(translation));
+    }
+
+    /// Applies a rotation in radians to the current transform of the [`Frame`].
+    #[inline]
+    pub fn rotate(&mut self, angle: f32) {
+        delegate!(self, frame => frame.rotate(angle));
+    }
+
+    /// Applies a scaling to the current transform of the [`Frame`].
+    #[inline]
+    pub fn scale(&mut self, scale: f32) {
+        delegate!(self, frame => frame.scale(scale));
+    }
+
+    pub fn into_geometry(self) -> Geometry {
+        Geometry(delegate!(self, frame => frame.into_primitive()))
+    }
+}
diff --git a/renderer/src/widget/canvas/cache.rs b/renderer/src/widget/canvas/cache.rs
new file mode 100644
index 00000000..7d6b4811
--- /dev/null
+++ b/renderer/src/widget/canvas/cache.rs
@@ -0,0 +1,85 @@
+use crate::widget::canvas::{Frame, Geometry};
+use crate::{Primitive, Renderer, Size};
+
+use std::cell::RefCell;
+use std::sync::Arc;
+
+/// A simple cache that stores generated [`Geometry`] to avoid recomputation.
+///
+/// A [`Cache`] will not redraw its geometry unless the dimensions of its layer
+/// change or it is explicitly cleared.
+#[derive(Debug, Default)]
+pub struct Cache {
+    state: RefCell<State>,
+}
+
+#[derive(Debug, Default)]
+enum State {
+    #[default]
+    Empty,
+    Filled {
+        bounds: Size,
+        primitive: Arc<Primitive>,
+    },
+}
+
+impl Cache {
+    /// Creates a new empty [`Cache`].
+    pub fn new() -> Self {
+        Cache {
+            state: Default::default(),
+        }
+    }
+
+    /// Clears the [`Cache`], forcing a redraw the next time it is used.
+    pub fn clear(&self) {
+        *self.state.borrow_mut() = State::Empty;
+    }
+
+    /// Draws [`Geometry`] using the provided closure and stores it in the
+    /// [`Cache`].
+    ///
+    /// The closure will only be called when
+    /// - the bounds have changed since the previous draw call.
+    /// - the [`Cache`] is empty or has been explicitly cleared.
+    ///
+    /// Otherwise, the previously stored [`Geometry`] will be returned. The
+    /// [`Cache`] is not cleared in this case. In other words, it will keep
+    /// returning the stored [`Geometry`] if needed.
+    pub fn draw<Theme>(
+        &self,
+        renderer: &Renderer<Theme>,
+        bounds: Size,
+        draw_fn: impl FnOnce(&mut Frame),
+    ) -> Geometry {
+        use std::ops::Deref;
+
+        if let State::Filled {
+            bounds: cached_bounds,
+            primitive,
+        } = self.state.borrow().deref()
+        {
+            if *cached_bounds == bounds {
+                return Geometry(Primitive::Cache {
+                    content: primitive.clone(),
+                });
+            }
+        }
+
+        let mut frame = Frame::new(renderer, bounds);
+        draw_fn(&mut frame);
+
+        let primitive = {
+            let geometry = frame.into_geometry();
+
+            Arc::new(geometry.0)
+        };
+
+        *self.state.borrow_mut() = State::Filled {
+            bounds,
+            primitive: primitive.clone(),
+        };
+
+        Geometry(Primitive::Cache { content: primitive })
+    }
+}
diff --git a/graphics/src/widget/qr_code.rs b/renderer/src/widget/qr_code.rs
index 12ce5b1f..aae4ec88 100644
--- a/graphics/src/widget/qr_code.rs
+++ b/renderer/src/widget/qr_code.rs
@@ -1,7 +1,8 @@
 //! Encode and display information in a QR code.
-use crate::renderer::{self, Renderer};
 use crate::widget::canvas;
-use crate::Backend;
+use crate::Renderer;
+
+use iced_graphics::renderer;
 
 use iced_native::layout;
 use iced_native::widget::Tree;
@@ -48,10 +49,7 @@ impl<'a> QRCode<'a> {
     }
 }
 
-impl<'a, Message, B, T> Widget<Message, Renderer<B, T>> for QRCode<'a>
-where
-    B: Backend,
-{
+impl<'a, Message, Theme> Widget<Message, Renderer<Theme>> for QRCode<'a> {
     fn width(&self) -> Length {
         Length::Shrink
     }
@@ -62,7 +60,7 @@ where
 
     fn layout(
         &self,
-        _renderer: &Renderer<B, T>,
+        _renderer: &Renderer<Theme>,
         _limits: &layout::Limits,
     ) -> layout::Node {
         let side_length = (self.state.width + 2 * QUIET_ZONE) as f32
@@ -74,8 +72,8 @@ where
     fn draw(
         &self,
         _state: &Tree,
-        renderer: &mut Renderer<B, T>,
-        _theme: &T,
+        renderer: &mut Renderer<Theme>,
+        _theme: &Theme,
         _style: &renderer::Style,
         layout: Layout<'_>,
         _cursor_position: Point,
@@ -87,50 +85,52 @@ where
         let side_length = self.state.width + 2 * QUIET_ZONE;
 
         // Reuse cache if possible
-        let geometry = self.state.cache.draw(bounds.size(), |frame| {
-            // Scale units to cell size
-            frame.scale(f32::from(self.cell_size));
-
-            // Draw background
-            frame.fill_rectangle(
-                Point::ORIGIN,
-                Size::new(side_length as f32, side_length as f32),
-                self.light,
-            );
-
-            // Avoid drawing on the quiet zone
-            frame.translate(Vector::new(QUIET_ZONE as f32, QUIET_ZONE as f32));
-
-            // Draw contents
-            self.state
-                .contents
-                .iter()
-                .enumerate()
-                .filter(|(_, value)| **value == qrcode::Color::Dark)
-                .for_each(|(index, _)| {
-                    let row = index / self.state.width;
-                    let column = index % self.state.width;
-
-                    frame.fill_rectangle(
-                        Point::new(column as f32, row as f32),
-                        Size::UNIT,
-                        self.dark,
-                    );
-                });
-        });
+        let geometry =
+            self.state.cache.draw(renderer, bounds.size(), |frame| {
+                // Scale units to cell size
+                frame.scale(f32::from(self.cell_size));
+
+                // Draw background
+                frame.fill_rectangle(
+                    Point::ORIGIN,
+                    Size::new(side_length as f32, side_length as f32),
+                    self.light,
+                );
+
+                // Avoid drawing on the quiet zone
+                frame.translate(Vector::new(
+                    QUIET_ZONE as f32,
+                    QUIET_ZONE as f32,
+                ));
+
+                // Draw contents
+                self.state
+                    .contents
+                    .iter()
+                    .enumerate()
+                    .filter(|(_, value)| **value == qrcode::Color::Dark)
+                    .for_each(|(index, _)| {
+                        let row = index / self.state.width;
+                        let column = index % self.state.width;
+
+                        frame.fill_rectangle(
+                            Point::new(column as f32, row as f32),
+                            Size::UNIT,
+                            self.dark,
+                        );
+                    });
+            });
 
         let translation = Vector::new(bounds.x, bounds.y);
 
         renderer.with_translation(translation, |renderer| {
-            renderer.draw_primitive(geometry.into_primitive());
+            renderer.draw_primitive(geometry.0);
         });
     }
 }
 
-impl<'a, Message, B, T> From<QRCode<'a>>
-    for Element<'a, Message, Renderer<B, T>>
-where
-    B: Backend,
+impl<'a, Message, Theme> From<QRCode<'a>>
+    for Element<'a, Message, Renderer<Theme>>
 {
     fn from(qr_code: QRCode<'a>) -> Self {
         Self::new(qr_code)
diff --git a/src/widget.rs b/src/widget.rs
index 04cb0e50..f3a66101 100644
--- a/src/widget.rs
+++ b/src/widget.rs
@@ -170,9 +170,10 @@ pub use iced_renderer::widget::canvas;
 #[cfg(feature = "canvas")]
 #[cfg_attr(docsrs, doc(cfg(feature = "canvas")))]
 /// Creates a new [`Canvas`].
-pub fn canvas<P, Message, Theme>(program: P) -> Canvas<Message, Theme, P>
+pub fn canvas<P, Message, Renderer>(program: P) -> Canvas<Message, Renderer, P>
 where
-    P: canvas::Program<Message, Theme>,
+    Renderer: canvas::Renderer,
+    P: canvas::Program<Message, Renderer>,
 {
     Canvas::new(program)
 }
diff --git a/tiny_skia/Cargo.toml b/tiny_skia/Cargo.toml
index 781e7d34..5f39fce2 100644
--- a/tiny_skia/Cargo.toml
+++ b/tiny_skia/Cargo.toml
@@ -6,6 +6,7 @@ edition = "2021"
 [features]
 image = []
 svg = []
+canvas = ["iced_native/canvas"]
 
 [dependencies]
 raw-window-handle = "0.5"
diff --git a/tiny_skia/src/backend.rs b/tiny_skia/src/backend.rs
index 66d83221..e08cede7 100644
--- a/tiny_skia/src/backend.rs
+++ b/tiny_skia/src/backend.rs
@@ -1,9 +1,9 @@
-use crate::{Color, Font, Settings, Size, Viewport};
+use crate::{Color, Font, Primitive, Settings, Size, Viewport};
 
 use iced_graphics::alignment;
 use iced_graphics::backend;
 use iced_graphics::text;
-use iced_graphics::{Background, Primitive, Rectangle, Vector};
+use iced_graphics::{Background, Rectangle, Vector};
 
 use std::borrow::Cow;
 
@@ -81,7 +81,6 @@ impl Backend {
         translation: Vector,
     ) {
         match primitive {
-            Primitive::None => {}
             Primitive::Quad {
                 bounds,
                 background,
@@ -161,6 +160,38 @@ impl Backend {
             Primitive::Svg { .. } => {
                 // TODO
             }
+            Primitive::Fill {
+                path,
+                paint,
+                rule,
+                transform,
+            } => {
+                pixels.fill_path(
+                    path,
+                    paint,
+                    *rule,
+                    transform
+                        .post_translate(translation.x, translation.y)
+                        .post_scale(scale_factor, scale_factor),
+                    clip_mask,
+                );
+            }
+            Primitive::Stroke {
+                path,
+                paint,
+                stroke,
+                transform,
+            } => {
+                pixels.stroke_path(
+                    path,
+                    paint,
+                    stroke,
+                    transform
+                        .post_translate(translation.x, translation.y)
+                        .post_scale(scale_factor, scale_factor),
+                    clip_mask,
+                );
+            }
             Primitive::Group { primitives } => {
                 for primitive in primitives {
                     self.draw_primitive(
@@ -196,16 +227,19 @@ impl Backend {
                     translation,
                 );
             }
-            Primitive::Cached { cache } => {
+            Primitive::Cache { content } => {
                 self.draw_primitive(
-                    cache,
+                    content,
                     pixels,
                     clip_mask,
                     scale_factor,
                     translation,
                 );
             }
-            Primitive::SolidMesh { .. } | Primitive::GradientMesh { .. } => {}
+            Primitive::SolidMesh { .. } | Primitive::GradientMesh { .. } => {
+                // Not supported!
+                // TODO: Draw a placeholder (?) / Log it (?)
+            }
         }
     }
 }
@@ -386,6 +420,8 @@ fn rectangular_clip_mask(
 }
 
 impl iced_graphics::Backend for Backend {
+    type Geometry = ();
+
     fn trim_measurements(&mut self) {
         self.text_pipeline.trim_measurement_cache();
     }
diff --git a/tiny_skia/src/canvas.rs b/tiny_skia/src/canvas.rs
new file mode 100644
index 00000000..c3b8b316
--- /dev/null
+++ b/tiny_skia/src/canvas.rs
@@ -0,0 +1,276 @@
+use crate::{Point, Primitive, Rectangle, Size, Vector};
+
+use iced_native::widget::canvas::fill::{self, Fill};
+use iced_native::widget::canvas::stroke::{self, Stroke};
+use iced_native::widget::canvas::{Path, Style, Text};
+use iced_native::Gradient;
+
+pub struct Frame {
+    size: Size,
+    transform: tiny_skia::Transform,
+    stack: Vec<tiny_skia::Transform>,
+    primitives: Vec<Primitive>,
+}
+
+impl Frame {
+    pub fn new(size: Size) -> Self {
+        Self {
+            size,
+            transform: tiny_skia::Transform::identity(),
+            stack: Vec::new(),
+            primitives: Vec::new(),
+        }
+    }
+
+    pub fn width(&self) -> f32 {
+        self.size.width
+    }
+
+    pub fn height(&self) -> f32 {
+        self.size.height
+    }
+
+    pub fn size(&self) -> Size {
+        self.size
+    }
+
+    pub fn center(&self) -> Point {
+        Point::new(self.size.width / 2.0, self.size.height / 2.0)
+    }
+
+    pub fn fill(&mut self, path: &Path, fill: impl Into<Fill>) {
+        let path = convert_path(path);
+        let fill = fill.into();
+
+        self.primitives.push(Primitive::Fill {
+            path,
+            paint: into_paint(fill.style),
+            rule: into_fill_rule(fill.rule),
+            transform: self.transform,
+        });
+    }
+
+    pub fn fill_rectangle(
+        &mut self,
+        top_left: Point,
+        size: Size,
+        fill: impl Into<Fill>,
+    ) {
+        self.fill(&Path::rectangle(top_left, size), fill);
+    }
+
+    pub fn stroke<'a>(&mut self, path: &Path, stroke: impl Into<Stroke<'a>>) {
+        let path = convert_path(path);
+        let stroke = stroke.into();
+        let skia_stroke = into_stroke(&stroke);
+
+        self.primitives.push(Primitive::Stroke {
+            path,
+            paint: into_paint(stroke.style),
+            stroke: skia_stroke,
+            transform: self.transform,
+        });
+    }
+
+    pub fn fill_text(&mut self, text: impl Into<Text>) {
+        let text = text.into();
+
+        let position = if self.transform.is_identity() {
+            text.position
+        } else {
+            let mut transformed = [tiny_skia::Point {
+                x: text.position.x,
+                y: text.position.y,
+            }];
+
+            self.transform.map_points(&mut transformed);
+
+            Point::new(transformed[0].x, transformed[0].y)
+        };
+
+        // TODO: Use vectorial text instead of primitive
+        self.primitives.push(Primitive::Text {
+            content: text.content,
+            bounds: Rectangle {
+                x: position.x,
+                y: position.y,
+                width: f32::INFINITY,
+                height: f32::INFINITY,
+            },
+            color: text.color,
+            size: text.size,
+            font: text.font,
+            horizontal_alignment: text.horizontal_alignment,
+            vertical_alignment: text.vertical_alignment,
+        });
+    }
+
+    pub fn push_transform(&mut self) {
+        self.stack.push(self.transform);
+    }
+
+    pub fn pop_transform(&mut self) {
+        self.transform = self.stack.pop().expect("Pop transform");
+    }
+
+    pub fn clip(&mut self, _frame: Self, _translation: Vector) {}
+
+    pub fn translate(&mut self, translation: Vector) {
+        self.transform =
+            self.transform.pre_translate(translation.x, translation.y);
+    }
+
+    pub fn rotate(&mut self, angle: f32) {
+        self.transform = self
+            .transform
+            .pre_concat(tiny_skia::Transform::from_rotate(angle.to_degrees()));
+    }
+
+    pub fn scale(&mut self, scale: f32) {
+        self.transform = self.transform.pre_scale(scale, scale);
+    }
+
+    pub fn into_primitive(self) -> Primitive {
+        Primitive::Clip {
+            bounds: Rectangle::new(Point::ORIGIN, self.size),
+            content: Box::new(Primitive::Group {
+                primitives: self.primitives,
+            }),
+        }
+    }
+}
+
+fn convert_path(path: &Path) -> tiny_skia::Path {
+    use iced_native::widget::canvas::path::lyon_path;
+
+    let mut builder = tiny_skia::PathBuilder::new();
+    let mut last_point = Default::default();
+
+    for event in path.raw().iter() {
+        match event {
+            lyon_path::Event::Begin { at } => {
+                builder.move_to(at.x, at.y);
+
+                last_point = at;
+            }
+            lyon_path::Event::Line { from, to } => {
+                if last_point != from {
+                    builder.move_to(from.x, from.y);
+                }
+
+                builder.line_to(to.x, to.y);
+
+                last_point = to;
+            }
+            lyon_path::Event::Quadratic { from, ctrl, to } => {
+                if last_point != from {
+                    builder.move_to(from.x, from.y);
+                }
+
+                builder.quad_to(ctrl.x, ctrl.y, to.x, to.y);
+
+                last_point = to;
+            }
+            lyon_path::Event::Cubic {
+                from,
+                ctrl1,
+                ctrl2,
+                to,
+            } => {
+                if last_point != from {
+                    builder.move_to(from.x, from.y);
+                }
+
+                builder
+                    .cubic_to(ctrl1.x, ctrl1.y, ctrl2.x, ctrl2.y, to.x, to.y);
+
+                last_point = to;
+            }
+            lyon_path::Event::End { close, .. } => {
+                if close {
+                    builder.close();
+                }
+            }
+        }
+    }
+
+    builder
+        .finish()
+        .expect("Convert lyon path to tiny_skia path")
+}
+
+pub fn into_paint(style: Style) -> tiny_skia::Paint<'static> {
+    tiny_skia::Paint {
+        shader: match style {
+            Style::Solid(color) => tiny_skia::Shader::SolidColor(
+                tiny_skia::Color::from_rgba(color.b, color.g, color.r, color.a)
+                    .expect("Create color"),
+            ),
+            Style::Gradient(gradient) => match gradient {
+                Gradient::Linear(linear) => tiny_skia::LinearGradient::new(
+                    tiny_skia::Point {
+                        x: linear.start.x,
+                        y: linear.start.y,
+                    },
+                    tiny_skia::Point {
+                        x: linear.end.x,
+                        y: linear.end.y,
+                    },
+                    linear
+                        .color_stops
+                        .into_iter()
+                        .map(|stop| {
+                            tiny_skia::GradientStop::new(
+                                stop.offset,
+                                tiny_skia::Color::from_rgba(
+                                    stop.color.b,
+                                    stop.color.g,
+                                    stop.color.r,
+                                    stop.color.a,
+                                )
+                                .expect("Create color"),
+                            )
+                        })
+                        .collect(),
+                    tiny_skia::SpreadMode::Pad,
+                    tiny_skia::Transform::identity(),
+                )
+                .expect("Create linear gradient"),
+            },
+        },
+        anti_alias: true,
+        ..Default::default()
+    }
+}
+
+pub fn into_fill_rule(rule: fill::Rule) -> tiny_skia::FillRule {
+    match rule {
+        fill::Rule::EvenOdd => tiny_skia::FillRule::EvenOdd,
+        fill::Rule::NonZero => tiny_skia::FillRule::Winding,
+    }
+}
+
+pub fn into_stroke(stroke: &Stroke) -> tiny_skia::Stroke {
+    tiny_skia::Stroke {
+        width: stroke.width,
+        line_cap: match stroke.line_cap {
+            stroke::LineCap::Butt => tiny_skia::LineCap::Butt,
+            stroke::LineCap::Square => tiny_skia::LineCap::Square,
+            stroke::LineCap::Round => tiny_skia::LineCap::Round,
+        },
+        line_join: match stroke.line_join {
+            stroke::LineJoin::Miter => tiny_skia::LineJoin::Miter,
+            stroke::LineJoin::Round => tiny_skia::LineJoin::Round,
+            stroke::LineJoin::Bevel => tiny_skia::LineJoin::Bevel,
+        },
+        dash: if stroke.line_dash.segments.is_empty() {
+            None
+        } else {
+            tiny_skia::StrokeDash::new(
+                stroke.line_dash.segments.into(),
+                stroke.line_dash.offset as f32,
+            )
+        },
+        ..Default::default()
+    }
+}
diff --git a/tiny_skia/src/lib.rs b/tiny_skia/src/lib.rs
index 420a1ffb..e66e6412 100644
--- a/tiny_skia/src/lib.rs
+++ b/tiny_skia/src/lib.rs
@@ -4,10 +4,18 @@ mod backend;
 mod settings;
 mod text;
 
+#[cfg(feature = "canvas")]
+pub mod canvas;
+
+pub use iced_graphics::primitive;
+
 pub use backend::Backend;
+pub use primitive::Primitive;
 pub use settings::Settings;
 
-pub use iced_graphics::{Color, Error, Font, Point, Size, Vector, Viewport};
+pub use iced_graphics::{
+    Color, Error, Font, Point, Rectangle, Size, Vector, Viewport,
+};
 
 /// A [`tiny-skia`] graphics renderer for [`iced`].
 ///
diff --git a/tiny_skia/src/primitive.rs b/tiny_skia/src/primitive.rs
new file mode 100644
index 00000000..22daaedc
--- /dev/null
+++ b/tiny_skia/src/primitive.rs
@@ -0,0 +1,82 @@
+use crate::{Rectangle, Vector};
+
+use std::sync::Arc;
+
+#[derive(Debug, Clone)]
+pub enum Primitive {
+    /// A group of primitives
+    Group {
+        /// The primitives of the group
+        primitives: Vec<Primitive>,
+    },
+    /// A clip primitive
+    Clip {
+        /// The bounds of the clip
+        bounds: Rectangle,
+        /// The content of the clip
+        content: Box<Primitive>,
+    },
+    /// A primitive that applies a translation
+    Translate {
+        /// The translation vector
+        translation: Vector,
+
+        /// The primitive to translate
+        content: Box<Primitive>,
+    },
+    /// A cached primitive.
+    ///
+    /// This can be useful if you are implementing a widget where primitive
+    /// generation is expensive.
+    Cached {
+        /// The cached primitive
+        cache: Arc<Primitive>,
+    },
+    /// A basic primitive.
+    Basic(iced_graphics::Primitive),
+}
+
+impl iced_graphics::backend::Primitive for Primitive {
+    fn translate(self, translation: Vector) -> Self {
+        Self::Translate {
+            translation,
+            content: Box::new(self),
+        }
+    }
+
+    fn clip(self, bounds: Rectangle) -> Self {
+        Self::Clip {
+            bounds,
+            content: Box::new(self),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Default)]
+pub struct Recording(pub(crate) Vec<Primitive>);
+
+impl iced_graphics::backend::Recording for Recording {
+    type Primitive = Primitive;
+
+    fn push(&mut self, primitive: Primitive) {
+        self.0.push(primitive);
+    }
+
+    fn push_basic(&mut self, basic: iced_graphics::Primitive) {
+        self.0.push(Primitive::Basic(basic));
+    }
+
+    fn group(self) -> Self::Primitive {
+        Primitive::Group { primitives: self.0 }
+    }
+
+    fn clear(&mut self) {
+        self.0.clear();
+    }
+}
+
+impl Recording {
+    pub fn primitives(&self) -> &[Primitive] {
+        &self.0
+    }
+}
diff --git a/tiny_skia/src/window/compositor.rs b/tiny_skia/src/window/compositor.rs
index 2bd5831e..08159cd8 100644
--- a/tiny_skia/src/window/compositor.rs
+++ b/tiny_skia/src/window/compositor.rs
@@ -1,7 +1,6 @@
-use crate::{Backend, Color, Error, Renderer, Settings, Viewport};
+use crate::{Backend, Color, Error, Primitive, Renderer, Settings, Viewport};
 
 use iced_graphics::window::compositor::{self, Information, SurfaceError};
-use iced_graphics::Primitive;
 
 use raw_window_handle::{HasRawDisplayHandle, HasRawWindowHandle};
 use std::marker::PhantomData;
diff --git a/wgpu/Cargo.toml b/wgpu/Cargo.toml
index 632873a3..0bcef71c 100644
--- a/wgpu/Cargo.toml
+++ b/wgpu/Cargo.toml
@@ -21,8 +21,7 @@ bmp = ["iced_graphics/bmp"]
 hdr = ["iced_graphics/hdr"]
 dds = ["iced_graphics/dds"]
 farbfeld = ["iced_graphics/farbfeld"]
-canvas = ["iced_graphics/canvas"]
-qr_code = ["iced_graphics/qr_code"]
+canvas = ["iced_graphics/canvas", "lyon"]
 spirv = ["wgpu/spirv"]
 webgl = ["wgpu/webgl"]
 
@@ -62,10 +61,6 @@ version = "0.2"
 git = "https://github.com/hecrj/glyphon.git"
 rev = "65b481d758f50fd13fc21af2cc5ef62ddee64955"
 
-[dependencies.tracing]
-version = "0.1.6"
-optional = true
-
 [dependencies.encase]
 version = "0.3.0"
 features = ["glam"]
@@ -73,6 +68,14 @@ features = ["glam"]
 [dependencies.glam]
 version = "0.21.3"
 
+[dependencies.lyon]
+version = "1.0"
+optional = true
+
+[dependencies.tracing]
+version = "0.1.6"
+optional = true
+
 [package.metadata.docs.rs]
 rustdoc-args = ["--cfg", "docsrs"]
 all-features = true
diff --git a/wgpu/src/backend.rs b/wgpu/src/backend.rs
index e650d9a5..10dc5b4f 100644
--- a/wgpu/src/backend.rs
+++ b/wgpu/src/backend.rs
@@ -1,11 +1,10 @@
 use crate::quad;
 use crate::text;
 use crate::triangle;
-use crate::{Settings, Transformation};
+use crate::{Layer, Primitive, Settings, Transformation};
 
 use iced_graphics::backend;
-use iced_graphics::layer::Layer;
-use iced_graphics::{Color, Font, Primitive, Size, Viewport};
+use iced_graphics::{Color, Font, Size, Viewport};
 
 #[cfg(feature = "tracing")]
 use tracing::info_span;
@@ -330,6 +329,8 @@ impl Backend {
 }
 
 impl iced_graphics::Backend for Backend {
+    type Geometry = ();
+
     fn trim_measurements(&mut self) {
         self.text_pipeline.trim_measurement_cache()
     }
diff --git a/wgpu/src/image.rs b/wgpu/src/image.rs
index db05d2ff..2159a3ec 100644
--- a/wgpu/src/image.rs
+++ b/wgpu/src/image.rs
@@ -6,10 +6,10 @@ use iced_graphics::image::raster;
 #[cfg(feature = "svg")]
 use iced_graphics::image::vector;
 
+use crate::layer;
 use crate::{Buffer, Transformation};
 use atlas::Atlas;
 
-use iced_graphics::layer;
 use iced_native::{Rectangle, Size};
 
 use std::cell::RefCell;
diff --git a/graphics/src/layer.rs b/wgpu/src/layer.rs
index f6eb2fdd..0840555a 100644
--- a/graphics/src/layer.rs
+++ b/wgpu/src/layer.rs
@@ -10,10 +10,11 @@ pub use mesh::Mesh;
 pub use quad::Quad;
 pub use text::Text;
 
-use crate::alignment;
-use crate::{
-    Background, Color, Font, Point, Primitive, Rectangle, Size, Vector,
-    Viewport,
+use crate::Primitive;
+
+use iced_graphics::alignment;
+use iced_graphics::{
+    Background, Color, Font, Point, Rectangle, Size, Vector, Viewport,
 };
 
 /// A group of primitives that should be clipped together.
@@ -110,18 +111,6 @@ impl<'a> Layer<'a> {
         current_layer: usize,
     ) {
         match primitive {
-            Primitive::None => {}
-            Primitive::Group { primitives } => {
-                // TODO: Inspect a bit and regroup (?)
-                for primitive in primitives {
-                    Self::process_primitive(
-                        layers,
-                        translation,
-                        primitive,
-                        current_layer,
-                    )
-                }
-            }
             Primitive::Text {
                 content,
                 bounds,
@@ -167,6 +156,27 @@ impl<'a> Layer<'a> {
                     border_color: border_color.into_linear(),
                 });
             }
+            Primitive::Image { handle, bounds } => {
+                let layer = &mut layers[current_layer];
+
+                layer.images.push(Image::Raster {
+                    handle: handle.clone(),
+                    bounds: *bounds + translation,
+                });
+            }
+            Primitive::Svg {
+                handle,
+                color,
+                bounds,
+            } => {
+                let layer = &mut layers[current_layer];
+
+                layer.images.push(Image::Vector {
+                    handle: handle.clone(),
+                    color: *color,
+                    bounds: *bounds + translation,
+                });
+            }
             Primitive::SolidMesh { buffers, size } => {
                 let layer = &mut layers[current_layer];
 
@@ -206,6 +216,17 @@ impl<'a> Layer<'a> {
                     });
                 }
             }
+            Primitive::Group { primitives } => {
+                // TODO: Inspect a bit and regroup (?)
+                for primitive in primitives {
+                    Self::process_primitive(
+                        layers,
+                        translation,
+                        primitive,
+                        current_layer,
+                    )
+                }
+            }
             Primitive::Clip { bounds, content } => {
                 let layer = &mut layers[current_layer];
                 let translated_bounds = *bounds + translation;
@@ -236,34 +257,17 @@ impl<'a> Layer<'a> {
                     current_layer,
                 );
             }
-            Primitive::Cached { cache } => {
+            Primitive::Cache { content } => {
                 Self::process_primitive(
                     layers,
                     translation,
-                    cache,
+                    content,
                     current_layer,
                 );
             }
-            Primitive::Image { handle, bounds } => {
-                let layer = &mut layers[current_layer];
-
-                layer.images.push(Image::Raster {
-                    handle: handle.clone(),
-                    bounds: *bounds + translation,
-                });
-            }
-            Primitive::Svg {
-                handle,
-                color,
-                bounds,
-            } => {
-                let layer = &mut layers[current_layer];
-
-                layer.images.push(Image::Vector {
-                    handle: handle.clone(),
-                    color: *color,
-                    bounds: *bounds + translation,
-                });
+            Primitive::Fill { .. } | Primitive::Stroke { .. } => {
+                // Unsupported!
+                // TODO: Draw a placeholder (?)
             }
         }
     }
diff --git a/graphics/src/layer/image.rs b/wgpu/src/layer/image.rs
index 3eff2397..3eff2397 100644
--- a/graphics/src/layer/image.rs
+++ b/wgpu/src/layer/image.rs
diff --git a/graphics/src/layer/mesh.rs b/wgpu/src/layer/mesh.rs
index 7661c5c9..5c1e41ad 100644
--- a/graphics/src/layer/mesh.rs
+++ b/wgpu/src/layer/mesh.rs
@@ -1,5 +1,5 @@
 //! A collection of triangle primitives.
-use crate::triangle;
+use crate::primitive;
 use crate::{Gradient, Point, Rectangle};
 
 /// A mesh of triangles.
@@ -11,7 +11,7 @@ pub enum Mesh<'a> {
         origin: Point,
 
         /// The vertex and index buffers of the [`Mesh`].
-        buffers: &'a triangle::Mesh2D<triangle::ColoredVertex2D>,
+        buffers: &'a primitive::Mesh2D<primitive::ColoredVertex2D>,
 
         /// The clipping bounds of the [`Mesh`].
         clip_bounds: Rectangle<f32>,
@@ -22,7 +22,7 @@ pub enum Mesh<'a> {
         origin: Point,
 
         /// The vertex and index buffers of the [`Mesh`].
-        buffers: &'a triangle::Mesh2D<triangle::Vertex2D>,
+        buffers: &'a primitive::Mesh2D<primitive::Vertex2D>,
 
         /// The clipping bounds of the [`Mesh`].
         clip_bounds: Rectangle<f32>,
diff --git a/graphics/src/layer/quad.rs b/wgpu/src/layer/quad.rs
index 0d8bde9d..0d8bde9d 100644
--- a/graphics/src/layer/quad.rs
+++ b/wgpu/src/layer/quad.rs
diff --git a/graphics/src/layer/text.rs b/wgpu/src/layer/text.rs
index 38d62616..38d62616 100644
--- a/graphics/src/layer/text.rs
+++ b/wgpu/src/layer/text.rs
diff --git a/wgpu/src/lib.rs b/wgpu/src/lib.rs
index 9da40572..8be12602 100644
--- a/wgpu/src/lib.rs
+++ b/wgpu/src/lib.rs
@@ -25,7 +25,7 @@
 )]
 #![deny(
     missing_debug_implementations,
-    missing_docs,
+    //missing_docs,
     unsafe_code,
     unused_results,
     clippy::extra_unused_lifetimes,
@@ -38,7 +38,9 @@
 #![allow(clippy::inherent_to_string, clippy::type_complexity)]
 #![cfg_attr(docsrs, feature(doc_cfg))]
 
+pub mod layer;
 pub mod settings;
+pub mod widget;
 pub mod window;
 
 mod backend;
@@ -47,16 +49,23 @@ mod quad;
 mod text;
 mod triangle;
 
+pub use iced_graphics::primitive;
 pub use iced_graphics::{
-    Antialiasing, Color, Error, Font, Primitive, Viewport,
+    Antialiasing, Color, Error, Font, Gradient, Point, Rectangle, Size, Vector,
+    Viewport,
 };
+pub use iced_native::alignment;
+
 pub use iced_native::Theme;
 pub use wgpu;
 
 pub use backend::Backend;
+pub use layer::Layer;
+pub use primitive::Primitive;
 pub use settings::Settings;
 
-use crate::buffer::Buffer;
+use buffer::Buffer;
+
 use iced_graphics::Transformation;
 
 #[cfg(any(feature = "image", feature = "svg"))]
diff --git a/wgpu/src/quad.rs b/wgpu/src/quad.rs
index 246cc5e1..8a568968 100644
--- a/wgpu/src/quad.rs
+++ b/wgpu/src/quad.rs
@@ -1,5 +1,6 @@
+use crate::layer;
 use crate::{Buffer, Transformation};
-use iced_graphics::layer;
+
 use iced_native::Rectangle;
 
 use bytemuck::{Pod, Zeroable};
diff --git a/wgpu/src/text.rs b/wgpu/src/text.rs
index dea6ab18..0dc8a64c 100644
--- a/wgpu/src/text.rs
+++ b/wgpu/src/text.rs
@@ -1,6 +1,7 @@
+use crate::layer::Text;
+
 pub use iced_native::text::Hit;
 
-use iced_graphics::layer::Text;
 use iced_native::alignment;
 use iced_native::{Color, Font, Rectangle, Size};
 
diff --git a/wgpu/src/triangle.rs b/wgpu/src/triangle.rs
index 4b4fa16d..706e4282 100644
--- a/wgpu/src/triangle.rs
+++ b/wgpu/src/triangle.rs
@@ -2,12 +2,12 @@
 mod msaa;
 
 use crate::buffer::r#static::Buffer;
+use crate::layer::mesh::{self, Mesh};
 use crate::settings;
 use crate::Transformation;
 
-use iced_graphics::layer::mesh::{self, Mesh};
-use iced_graphics::triangle::ColoredVertex2D;
 use iced_graphics::Size;
+
 #[cfg(feature = "tracing")]
 use tracing::info_span;
 
@@ -468,6 +468,7 @@ mod solid {
     use crate::settings;
     use crate::triangle;
     use encase::ShaderType;
+    use iced_graphics::primitive;
     use iced_graphics::Transformation;
 
     #[derive(Debug)]
@@ -478,7 +479,7 @@ mod solid {
 
     #[derive(Debug)]
     pub struct Layer {
-        pub vertices: Buffer<triangle::ColoredVertex2D>,
+        pub vertices: Buffer<primitive::ColoredVertex2D>,
         pub uniforms: dynamic::Buffer<Uniforms>,
         pub constants: wgpu::BindGroup,
     }
@@ -596,7 +597,7 @@ mod solid {
                         entry_point: "vs_main",
                         buffers: &[wgpu::VertexBufferLayout {
                             array_stride: std::mem::size_of::<
-                                triangle::ColoredVertex2D,
+                                primitive::ColoredVertex2D,
                             >()
                                 as u64,
                             step_mode: wgpu::VertexStepMode::Vertex,
@@ -637,7 +638,7 @@ mod gradient {
 
     use encase::ShaderType;
     use glam::{IVec4, Vec4};
-    use iced_graphics::triangle::Vertex2D;
+    use iced_graphics::primitive;
 
     #[derive(Debug)]
     pub struct Pipeline {
@@ -647,7 +648,7 @@ mod gradient {
 
     #[derive(Debug)]
     pub struct Layer {
-        pub vertices: Buffer<Vertex2D>,
+        pub vertices: Buffer<primitive::Vertex2D>,
         pub uniforms: dynamic::Buffer<Uniforms>,
         pub storage: dynamic::Buffer<Storage>,
         pub constants: wgpu::BindGroup,
@@ -810,34 +811,38 @@ mod gradient {
                     ),
                 });
 
-            let pipeline = device.create_render_pipeline(
-                &wgpu::RenderPipelineDescriptor {
-                    label: Some("iced_wgpu::triangle::gradient pipeline"),
-                    layout: Some(&layout),
-                    vertex: wgpu::VertexState {
-                        module: &shader,
-                        entry_point: "vs_main",
-                        buffers: &[wgpu::VertexBufferLayout {
-                            array_stride: std::mem::size_of::<Vertex2D>()
-                                as u64,
-                            step_mode: wgpu::VertexStepMode::Vertex,
-                            attributes: &wgpu::vertex_attr_array!(
-                                // Position
-                                0 => Float32x2,
-                            ),
-                        }],
+            let pipeline =
+                device.create_render_pipeline(
+                    &wgpu::RenderPipelineDescriptor {
+                        label: Some("iced_wgpu::triangle::gradient pipeline"),
+                        layout: Some(&layout),
+                        vertex: wgpu::VertexState {
+                            module: &shader,
+                            entry_point: "vs_main",
+                            buffers: &[wgpu::VertexBufferLayout {
+                                array_stride: std::mem::size_of::<
+                                    primitive::Vertex2D,
+                                >(
+                                )
+                                    as u64,
+                                step_mode: wgpu::VertexStepMode::Vertex,
+                                attributes: &wgpu::vertex_attr_array!(
+                                    // Position
+                                    0 => Float32x2,
+                                ),
+                            }],
+                        },
+                        fragment: Some(wgpu::FragmentState {
+                            module: &shader,
+                            entry_point: "fs_main",
+                            targets: &[triangle::fragment_target(format)],
+                        }),
+                        primitive: triangle::primitive_state(),
+                        depth_stencil: None,
+                        multisample: triangle::multisample_state(antialiasing),
+                        multiview: None,
                     },
-                    fragment: Some(wgpu::FragmentState {
-                        module: &shader,
-                        entry_point: "fs_main",
-                        targets: &[triangle::fragment_target(format)],
-                    }),
-                    primitive: triangle::primitive_state(),
-                    depth_stencil: None,
-                    multisample: triangle::multisample_state(antialiasing),
-                    multiview: None,
-                },
-            );
+                );
 
             Self {
                 pipeline,
diff --git a/graphics/src/widget.rs b/wgpu/src/widget.rs
index e7fab97c..8d05041e 100644
--- a/graphics/src/widget.rs
+++ b/wgpu/src/widget.rs
@@ -1,4 +1,5 @@
 //! Use the graphical widgets supported out-of-the-box.
+
 #[cfg(feature = "canvas")]
 #[cfg_attr(docsrs, doc(cfg(feature = "canvas")))]
 pub mod canvas;
@@ -6,11 +7,3 @@ pub mod canvas;
 #[cfg(feature = "canvas")]
 #[doc(no_inline)]
 pub use canvas::Canvas;
-
-#[cfg(feature = "qr_code")]
-#[cfg_attr(docsrs, doc(cfg(feature = "qr_code")))]
-pub mod qr_code;
-
-#[cfg(feature = "qr_code")]
-#[doc(no_inline)]
-pub use qr_code::QRCode;
diff --git a/wgpu/src/widget/canvas.rs b/wgpu/src/widget/canvas.rs
new file mode 100644
index 00000000..41444fcf
--- /dev/null
+++ b/wgpu/src/widget/canvas.rs
@@ -0,0 +1,16 @@
+mod cache;
+mod frame;
+mod geometry;
+
+pub use cache::Cache;
+pub use frame::Frame;
+pub use geometry::Geometry;
+
+pub use iced_native::widget::canvas::event::{self, Event};
+pub use iced_native::widget::canvas::fill::{self, Fill};
+pub use iced_native::widget::canvas::gradient::{self, Gradient};
+pub use iced_native::widget::canvas::path::{self, Path};
+pub use iced_native::widget::canvas::stroke::{self, Stroke};
+pub use iced_native::widget::canvas::{
+    Canvas, Cursor, LineCap, LineDash, LineJoin, Program, Renderer, Style, Text,
+};
diff --git a/graphics/src/widget/canvas/cache.rs b/wgpu/src/widget/canvas/cache.rs
index 52217bbb..09b26b90 100644
--- a/graphics/src/widget/canvas/cache.rs
+++ b/wgpu/src/widget/canvas/cache.rs
@@ -4,7 +4,9 @@ use crate::Primitive;
 use iced_native::Size;
 use std::{cell::RefCell, sync::Arc};
 
+#[derive(Default)]
 enum State {
+    #[default]
     Empty,
     Filled {
         bounds: Size,
@@ -12,11 +14,6 @@ enum State {
     },
 }
 
-impl Default for State {
-    fn default() -> Self {
-        State::Empty
-    }
-}
 /// A simple cache that stores generated [`Geometry`] to avoid recomputation.
 ///
 /// A [`Cache`] will not redraw its geometry unless the dimensions of its layer
@@ -62,8 +59,8 @@ impl Cache {
         } = self.state.borrow().deref()
         {
             if *cached_bounds == bounds {
-                return Geometry::from_primitive(Primitive::Cached {
-                    cache: primitive.clone(),
+                return Geometry::from_primitive(Primitive::Cache {
+                    content: primitive.clone(),
                 });
             }
         }
@@ -71,18 +68,14 @@ impl Cache {
         let mut frame = Frame::new(bounds);
         draw_fn(&mut frame);
 
-        let primitive = {
-            let geometry = frame.into_geometry();
-
-            Arc::new(geometry.into_primitive())
-        };
+        let primitive = Arc::new(frame.into_primitive());
 
         *self.state.borrow_mut() = State::Filled {
             bounds,
             primitive: primitive.clone(),
         };
 
-        Geometry::from_primitive(Primitive::Cached { cache: primitive })
+        Geometry::from_primitive(Primitive::Cache { content: primitive })
     }
 }
 
diff --git a/graphics/src/widget/canvas/frame.rs b/wgpu/src/widget/canvas/frame.rs
index d68548ae..987570ec 100644
--- a/graphics/src/widget/canvas/frame.rs
+++ b/wgpu/src/widget/canvas/frame.rs
@@ -1,9 +1,10 @@
-use crate::gradient::Gradient;
-use crate::triangle;
-use crate::widget::canvas::{path, Fill, Geometry, Path, Stroke, Style, Text};
-use crate::Primitive;
+use crate::primitive::{self, Primitive};
+use crate::widget::canvas::fill::{self, Fill};
+use crate::widget::canvas::{
+    LineCap, LineDash, LineJoin, Path, Stroke, Style, Text,
+};
 
-use iced_native::{Point, Rectangle, Size, Vector};
+use iced_native::{Gradient, Point, Rectangle, Size, Vector};
 
 use lyon::geom::euclid;
 use lyon::tessellation;
@@ -23,9 +24,9 @@ pub struct Frame {
 }
 
 enum Buffer {
-    Solid(tessellation::VertexBuffers<triangle::ColoredVertex2D, u32>),
+    Solid(tessellation::VertexBuffers<primitive::ColoredVertex2D, u32>),
     Gradient(
-        tessellation::VertexBuffers<triangle::Vertex2D, u32>,
+        tessellation::VertexBuffers<primitive::Vertex2D, u32>,
         Gradient,
     ),
 }
@@ -196,8 +197,8 @@ impl Frame {
             .buffers
             .get_fill(&self.transforms.current.transform_style(style));
 
-        let options =
-            tessellation::FillOptions::default().with_fill_rule(rule.into());
+        let options = tessellation::FillOptions::default()
+            .with_fill_rule(into_fill_rule(rule));
 
         if self.transforms.current.is_identity {
             self.fill_tessellator.tessellate_path(
@@ -206,7 +207,7 @@ impl Frame {
                 buffer.as_mut(),
             )
         } else {
-            let path = path.transformed(&self.transforms.current.raw);
+            let path = path.transform(&self.transforms.current.raw);
 
             self.fill_tessellator.tessellate_path(
                 path.raw(),
@@ -241,8 +242,8 @@ impl Frame {
                 lyon::math::Vector::new(size.width, size.height),
             );
 
-        let options =
-            tessellation::FillOptions::default().with_fill_rule(rule.into());
+        let options = tessellation::FillOptions::default()
+            .with_fill_rule(into_fill_rule(rule));
 
         self.fill_tessellator
             .tessellate_rectangle(
@@ -264,14 +265,14 @@ impl Frame {
 
         let mut options = tessellation::StrokeOptions::default();
         options.line_width = stroke.width;
-        options.start_cap = stroke.line_cap.into();
-        options.end_cap = stroke.line_cap.into();
-        options.line_join = stroke.line_join.into();
+        options.start_cap = into_line_cap(stroke.line_cap);
+        options.end_cap = into_line_cap(stroke.line_cap);
+        options.line_join = into_line_join(stroke.line_join);
 
         let path = if stroke.line_dash.segments.is_empty() {
             Cow::Borrowed(path)
         } else {
-            Cow::Owned(path::dashed(path, stroke.line_dash))
+            Cow::Owned(dashed(path, stroke.line_dash))
         };
 
         if self.transforms.current.is_identity {
@@ -281,7 +282,7 @@ impl Frame {
                 buffer.as_mut(),
             )
         } else {
-            let path = path.transformed(&self.transforms.current.raw);
+            let path = path.transform(&self.transforms.current.raw);
 
             self.stroke_tessellator.tessellate_path(
                 path.raw(),
@@ -344,10 +345,18 @@ impl Frame {
     /// operations in different coordinate systems.
     #[inline]
     pub fn with_save(&mut self, f: impl FnOnce(&mut Frame)) {
-        self.transforms.previous.push(self.transforms.current);
+        self.push_transform();
 
         f(self);
 
+        self.pop_transform();
+    }
+
+    pub fn push_transform(&mut self) {
+        self.transforms.previous.push(self.transforms.current);
+    }
+
+    pub fn pop_transform(&mut self) {
         self.transforms.current = self.transforms.previous.pop().unwrap();
     }
 
@@ -363,14 +372,19 @@ impl Frame {
 
         f(&mut frame);
 
+        let translation = Vector::new(region.x, region.y);
+
+        self.clip(frame, translation);
+    }
+
+    pub fn clip(&mut self, frame: Frame, translation: Vector) {
+        let size = frame.size();
         let primitives = frame.into_primitives();
 
         let (text, meshes) = primitives
             .into_iter()
             .partition(|primitive| matches!(primitive, Primitive::Text { .. }));
 
-        let translation = Vector::new(region.x, region.y);
-
         self.primitives.push(Primitive::Group {
             primitives: vec![
                 Primitive::Translate {
@@ -380,7 +394,7 @@ impl Frame {
                 Primitive::Translate {
                     translation,
                     content: Box::new(Primitive::Clip {
-                        bounds: Rectangle::with_size(region.size()),
+                        bounds: Rectangle::with_size(size),
                         content: Box::new(Primitive::Group {
                             primitives: text,
                         }),
@@ -423,11 +437,11 @@ impl Frame {
         self.transforms.current.is_identity = false;
     }
 
-    /// Produces the [`Geometry`] representing everything drawn on the [`Frame`].
-    pub fn into_geometry(self) -> Geometry {
-        Geometry::from_primitive(Primitive::Group {
+    /// Produces the [`Primitive`] representing everything drawn on the [`Frame`].
+    pub fn into_primitive(self) -> Primitive {
+        Primitive::Group {
             primitives: self.into_primitives(),
-        })
+        }
     }
 
     fn into_primitives(mut self) -> Vec<Primitive> {
@@ -436,7 +450,7 @@ impl Frame {
                 Buffer::Solid(buffer) => {
                     if !buffer.indices.is_empty() {
                         self.primitives.push(Primitive::SolidMesh {
-                            buffers: triangle::Mesh2D {
+                            buffers: primitive::Mesh2D {
                                 vertices: buffer.vertices,
                                 indices: buffer.indices,
                             },
@@ -447,7 +461,7 @@ impl Frame {
                 Buffer::Gradient(buffer, gradient) => {
                     if !buffer.indices.is_empty() {
                         self.primitives.push(Primitive::GradientMesh {
-                            buffers: triangle::Mesh2D {
+                            buffers: primitive::Mesh2D {
                                 vertices: buffer.vertices,
                                 indices: buffer.indices,
                             },
@@ -465,31 +479,31 @@ impl Frame {
 
 struct Vertex2DBuilder;
 
-impl tessellation::FillVertexConstructor<triangle::Vertex2D>
+impl tessellation::FillVertexConstructor<primitive::Vertex2D>
     for Vertex2DBuilder
 {
     fn new_vertex(
         &mut self,
         vertex: tessellation::FillVertex<'_>,
-    ) -> triangle::Vertex2D {
+    ) -> primitive::Vertex2D {
         let position = vertex.position();
 
-        triangle::Vertex2D {
+        primitive::Vertex2D {
             position: [position.x, position.y],
         }
     }
 }
 
-impl tessellation::StrokeVertexConstructor<triangle::Vertex2D>
+impl tessellation::StrokeVertexConstructor<primitive::Vertex2D>
     for Vertex2DBuilder
 {
     fn new_vertex(
         &mut self,
         vertex: tessellation::StrokeVertex<'_, '_>,
-    ) -> triangle::Vertex2D {
+    ) -> primitive::Vertex2D {
         let position = vertex.position();
 
-        triangle::Vertex2D {
+        primitive::Vertex2D {
             position: [position.x, position.y],
         }
     }
@@ -497,34 +511,99 @@ impl tessellation::StrokeVertexConstructor<triangle::Vertex2D>
 
 struct TriangleVertex2DBuilder([f32; 4]);
 
-impl tessellation::FillVertexConstructor<triangle::ColoredVertex2D>
+impl tessellation::FillVertexConstructor<primitive::ColoredVertex2D>
     for TriangleVertex2DBuilder
 {
     fn new_vertex(
         &mut self,
         vertex: tessellation::FillVertex<'_>,
-    ) -> triangle::ColoredVertex2D {
+    ) -> primitive::ColoredVertex2D {
         let position = vertex.position();
 
-        triangle::ColoredVertex2D {
+        primitive::ColoredVertex2D {
             position: [position.x, position.y],
             color: self.0,
         }
     }
 }
 
-impl tessellation::StrokeVertexConstructor<triangle::ColoredVertex2D>
+impl tessellation::StrokeVertexConstructor<primitive::ColoredVertex2D>
     for TriangleVertex2DBuilder
 {
     fn new_vertex(
         &mut self,
         vertex: tessellation::StrokeVertex<'_, '_>,
-    ) -> triangle::ColoredVertex2D {
+    ) -> primitive::ColoredVertex2D {
         let position = vertex.position();
 
-        triangle::ColoredVertex2D {
+        primitive::ColoredVertex2D {
             position: [position.x, position.y],
             color: self.0,
         }
     }
 }
+
+fn into_line_join(line_join: LineJoin) -> lyon::tessellation::LineJoin {
+    match line_join {
+        LineJoin::Miter => lyon::tessellation::LineJoin::Miter,
+        LineJoin::Round => lyon::tessellation::LineJoin::Round,
+        LineJoin::Bevel => lyon::tessellation::LineJoin::Bevel,
+    }
+}
+
+fn into_line_cap(line_cap: LineCap) -> lyon::tessellation::LineCap {
+    match line_cap {
+        LineCap::Butt => lyon::tessellation::LineCap::Butt,
+        LineCap::Square => lyon::tessellation::LineCap::Square,
+        LineCap::Round => lyon::tessellation::LineCap::Round,
+    }
+}
+
+fn into_fill_rule(rule: fill::Rule) -> lyon::tessellation::FillRule {
+    match rule {
+        fill::Rule::NonZero => lyon::tessellation::FillRule::NonZero,
+        fill::Rule::EvenOdd => lyon::tessellation::FillRule::EvenOdd,
+    }
+}
+
+pub(super) fn dashed(path: &Path, line_dash: LineDash<'_>) -> Path {
+    use lyon::algorithms::walk::{
+        walk_along_path, RepeatedPattern, WalkerEvent,
+    };
+    use lyon::path::iterator::PathIterator;
+
+    Path::new(|builder| {
+        let segments_odd = (line_dash.segments.len() % 2 == 1)
+            .then(|| [line_dash.segments, line_dash.segments].concat());
+
+        let mut draw_line = false;
+
+        walk_along_path(
+            path.raw().iter().flattened(0.01),
+            0.0,
+            lyon::tessellation::StrokeOptions::DEFAULT_TOLERANCE,
+            &mut RepeatedPattern {
+                callback: |event: WalkerEvent<'_>| {
+                    let point = Point {
+                        x: event.position.x,
+                        y: event.position.y,
+                    };
+
+                    if draw_line {
+                        builder.line_to(point);
+                    } else {
+                        builder.move_to(point);
+                    }
+
+                    draw_line = !draw_line;
+
+                    true
+                },
+                index: line_dash.offset,
+                intervals: segments_odd
+                    .as_deref()
+                    .unwrap_or(line_dash.segments),
+            },
+        );
+    })
+}
diff --git a/graphics/src/widget/canvas/geometry.rs b/wgpu/src/widget/canvas/geometry.rs
index e8ac621d..e8ac621d 100644
--- a/graphics/src/widget/canvas/geometry.rs
+++ b/wgpu/src/widget/canvas/geometry.rs