Merge pull request #193 from hecrj/feature/canvas

Canvas widget for 2D graphics

Cargo.toml

@@ -16,6 +16,8 @@ categories = ["gui"]
 image = ["iced_wgpu/image"]
 # Enables the `Svg` widget
 svg = ["iced_wgpu/svg"]
+# Enables the `Canvas` widget
+canvas = ["iced_wgpu/canvas"]
 # Enables a debug view in native platforms (press F12)
 debug = ["iced_winit/debug"]
 # Enables `tokio` as the `executor::Default` on native platforms
@@ -36,6 +38,7 @@ members = [
     "wgpu",
     "winit",
     "examples/bezier_tool",
+    "examples/clock",
     "examples/counter",
     "examples/custom_widget",
     "examples/events",
@@ -43,6 +46,7 @@ members = [
     "examples/integration",
     "examples/pokedex",
     "examples/progress_bar",
+    "examples/solar_system",
     "examples/stopwatch",
     "examples/styling",
     "examples/svg",

core/src/color.rs

@@ -44,11 +44,18 @@ impl Color {
     ///
     /// [`Color`]: struct.Color.html
     pub fn from_rgb8(r: u8, g: u8, b: u8) -> Color {
+        Color::from_rgba8(r, g, b, 1.0)
+    }
+
+    /// Creates a [`Color`] from its RGB8 components and an alpha value.
+    ///
+    /// [`Color`]: struct.Color.html
+    pub fn from_rgba8(r: u8, g: u8, b: u8, a: f32) -> Color {
         Color {
             r: f32::from(r) / 255.0,
             g: f32::from(g) / 255.0,
             b: f32::from(b) / 255.0,
-            a: 1.0,
+            a,
         }
     }
 

core/src/lib.rs

@@ -22,6 +22,7 @@ mod font;
 mod length;
 mod point;
 mod rectangle;
+mod size;
 mod vector;
 
 pub use align::{Align, HorizontalAlignment, VerticalAlignment};
@@ -31,4 +32,5 @@ pub use font::Font;
 pub use length::Length;
 pub use point::Point;
 pub use rectangle::Rectangle;
+pub use size::Size;
 pub use vector::Vector;

core/src/point.rs

@@ -11,10 +11,15 @@ pub struct Point {
 }
 
 impl Point {
+    /// The origin (i.e. a [`Point`] with both X=0 and Y=0).
+    ///
+    /// [`Point`]: struct.Point.html
+    pub const ORIGIN: Point = Point::new(0.0, 0.0);
+
     /// Creates a new [`Point`] with the given coordinates.
     ///
     /// [`Point`]: struct.Point.html
-    pub fn new(x: f32, y: f32) -> Self {
+    pub const fn new(x: f32, y: f32) -> Self {
         Self { x, y }
     }
 }

examples/bezier_tool/src/main.rs

@@ -94,7 +94,7 @@ mod bezier {
             layout: Layout<'_>,
             cursor_position: Point,
         ) -> (Primitive, MouseCursor) {
-            let mut buffer: VertexBuffers<Vertex2D, u16> = VertexBuffers::new();
+            let mut buffer: VertexBuffers<Vertex2D, u32> = VertexBuffers::new();
             let mut path_builder = lyon::path::Path::builder();
 
             let bounds = layout.bounds();
@@ -102,7 +102,7 @@ mod bezier {
             // Draw rectangle border with lyon.
             basic_shapes::stroke_rectangle(
                 &lyon::math::Rect::new(
-                    lyon::math::Point::new(bounds.x + 0.5, bounds.y + 0.5),
+                    lyon::math::Point::new(0.5, 0.5),
                     lyon::math::Size::new(
                         bounds.width - 1.0,
                         bounds.height - 1.0,
@@ -121,48 +121,35 @@ mod bezier {
 
             for curve in self.curves {
                 path_builder.move_to(lyon::math::Point::new(
-                    curve.from.x + bounds.x,
+                    curve.from.x,
-                    curve.from.y + bounds.y,
+                    curve.from.y,
                 ));
 
                 path_builder.quadratic_bezier_to(
-                    lyon::math::Point::new(
+                    lyon::math::Point::new(curve.control.x, curve.control.y),
-                        curve.control.x + bounds.x,
+                    lyon::math::Point::new(curve.to.x, curve.to.y),
-                        curve.control.y + bounds.y,
-                    ),
-                    lyon::math::Point::new(
-                        curve.to.x + bounds.x,
-                        curve.to.y + bounds.y,
-                    ),
                 );
             }
 
             match self.state.pending {
                 None => {}
                 Some(Pending::One { from }) => {
-                    path_builder.move_to(lyon::math::Point::new(
+                    path_builder
-                        from.x + bounds.x,
+                        .move_to(lyon::math::Point::new(from.x, from.y));
-                        from.y + bounds.y,
-                    ));
                     path_builder.line_to(lyon::math::Point::new(
-                        cursor_position.x,
+                        cursor_position.x - bounds.x,
-                        cursor_position.y,
+                        cursor_position.y - bounds.y,
                     ));
                 }
                 Some(Pending::Two { from, to }) => {
-                    path_builder.move_to(lyon::math::Point::new(
+                    path_builder
-                        from.x + bounds.x,
+                        .move_to(lyon::math::Point::new(from.x, from.y));
-                        from.y + bounds.y,
-                    ));
                     path_builder.quadratic_bezier_to(
                         lyon::math::Point::new(
-                            cursor_position.x,
+                            cursor_position.x - bounds.x,
-                            cursor_position.y,
+                            cursor_position.y - bounds.y,
-                        ),
-                        lyon::math::Point::new(
-                            to.x + bounds.x,
-                            to.y + bounds.y,
                         ),
+                        lyon::math::Point::new(to.x, to.y),
                     );
                 }
             }
@@ -186,10 +173,13 @@ mod bezier {
                 )
                 .unwrap();
 
-            let mesh = Primitive::Mesh2D(Arc::new(Mesh2D {
+            let mesh = Primitive::Mesh2D {
-                vertices: buffer.vertices,
+                origin: Point::new(bounds.x, bounds.y),
-                indices: buffer.indices,
+                buffers: Arc::new(Mesh2D {
-            }));
+                    vertices: buffer.vertices,
+                    indices: buffer.indices,
+                }),
+            };
 
             (
                 Primitive::Clip {
@@ -296,7 +286,10 @@ use iced::{
 };
 
 pub fn main() {
-    Example::run(Settings::default())
+    Example::run(Settings {
+        antialiasing: true,
+        ..Settings::default()
+    });
 }
 
 #[derive(Default)]

examples/clock/Cargo.toml

@@ -0,0 +1,15 @@
+[package]
+name = "clock"
+version = "0.1.0"
+authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
+edition = "2018"
+publish = false
+
+[features]
+canvas = []
+
+[dependencies]
+iced = { path = "../..", features = ["canvas", "async-std", "debug"] }
+iced_native = { path = "../../native" }
+chrono = "0.4"
+async-std = { version = "1.0", features = ["unstable"] }

examples/clock/src/main.rs

@@ -0,0 +1,193 @@
+use iced::{
+    canvas, executor, Application, Canvas, Color, Command, Container, Element,
+    Length, Point, Settings, Subscription, Vector,
+};
+
+pub fn main() {
+    Clock::run(Settings {
+        antialiasing: true,
+        ..Settings::default()
+    })
+}
+
+struct Clock {
+    now: LocalTime,
+    clock: canvas::layer::Cache<LocalTime>,
+}
+
+#[derive(Debug, Clone, Copy)]
+enum Message {
+    Tick(chrono::DateTime<chrono::Local>),
+}
+
+impl Application for Clock {
+    type Executor = executor::Default;
+    type Message = Message;
+
+    fn new() -> (Self, Command<Message>) {
+        (
+            Clock {
+                now: chrono::Local::now().into(),
+                clock: canvas::layer::Cache::new(),
+            },
+            Command::none(),
+        )
+    }
+
+    fn title(&self) -> String {
+        String::from("Clock - Iced")
+    }
+
+    fn update(&mut self, message: Message) -> Command<Message> {
+        match message {
+            Message::Tick(local_time) => {
+                let now = local_time.into();
+
+                if now != self.now {
+                    self.now = now;
+                    self.clock.clear();
+                }
+            }
+        }
+
+        Command::none()
+    }
+
+    fn subscription(&self) -> Subscription<Message> {
+        time::every(std::time::Duration::from_millis(500)).map(Message::Tick)
+    }
+
+    fn view(&mut self) -> Element<Message> {
+        let canvas = Canvas::new()
+            .width(Length::Units(400))
+            .height(Length::Units(400))
+            .push(self.clock.with(&self.now));
+
+        Container::new(canvas)
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .center_x()
+            .center_y()
+            .into()
+    }
+}
+
+#[derive(Debug, PartialEq, Eq)]
+struct LocalTime {
+    hour: u32,
+    minute: u32,
+    second: u32,
+}
+
+impl From<chrono::DateTime<chrono::Local>> for LocalTime {
+    fn from(date_time: chrono::DateTime<chrono::Local>) -> LocalTime {
+        use chrono::Timelike;
+
+        LocalTime {
+            hour: date_time.hour(),
+            minute: date_time.minute(),
+            second: date_time.second(),
+        }
+    }
+}
+
+impl canvas::Drawable for LocalTime {
+    fn draw(&self, frame: &mut canvas::Frame) {
+        let center = frame.center();
+        let radius = frame.width().min(frame.height()) / 2.0;
+        let offset = Vector::new(center.x, center.y);
+
+        let clock = canvas::Path::new(|path| path.circle(center, radius));
+
+        frame.fill(
+            &clock,
+            canvas::Fill::Color(Color::from_rgb8(0x12, 0x93, 0xD8)),
+        );
+
+        fn draw_hand(
+            n: u32,
+            total: u32,
+            length: f32,
+            offset: Vector,
+            path: &mut canvas::path::Builder,
+        ) {
+            let turns = n as f32 / total as f32;
+            let t = 2.0 * std::f32::consts::PI * (turns - 0.25);
+
+            let x = length * t.cos();
+            let y = length * t.sin();
+
+            path.line_to(Point::new(x, y) + offset);
+        }
+
+        let hour_and_minute_hands = canvas::Path::new(|path| {
+            path.move_to(center);
+            draw_hand(self.hour, 12, 0.5 * radius, offset, path);
+
+            path.move_to(center);
+            draw_hand(self.minute, 60, 0.8 * radius, offset, path)
+        });
+
+        frame.stroke(
+            &hour_and_minute_hands,
+            canvas::Stroke {
+                width: 6.0,
+                color: Color::WHITE,
+                line_cap: canvas::LineCap::Round,
+                ..canvas::Stroke::default()
+            },
+        );
+
+        let second_hand = canvas::Path::new(|path| {
+            path.move_to(center);
+            draw_hand(self.second, 60, 0.8 * radius, offset, path)
+        });
+
+        frame.stroke(
+            &second_hand,
+            canvas::Stroke {
+                width: 3.0,
+                color: Color::WHITE,
+                line_cap: canvas::LineCap::Round,
+                ..canvas::Stroke::default()
+            },
+        );
+    }
+}
+
+mod time {
+    use iced::futures;
+
+    pub fn every(
+        duration: std::time::Duration,
+    ) -> iced::Subscription<chrono::DateTime<chrono::Local>> {
+        iced::Subscription::from_recipe(Every(duration))
+    }
+
+    struct Every(std::time::Duration);
+
+    impl<H, I> iced_native::subscription::Recipe<H, I> for Every
+    where
+        H: std::hash::Hasher,
+    {
+        type Output = chrono::DateTime<chrono::Local>;
+
+        fn hash(&self, state: &mut H) {
+            use std::hash::Hash;
+
+            std::any::TypeId::of::<Self>().hash(state);
+            self.0.hash(state);
+        }
+
+        fn stream(
+            self: Box<Self>,
+            _input: futures::stream::BoxStream<'static, I>,
+        ) -> futures::stream::BoxStream<'static, Self::Output> {
+            use futures::stream::StreamExt;
+
+            async_std::stream::interval(self.0)
+                .map(|_| chrono::Local::now())
+                .boxed()
+        }
+    }
+}

examples/geometry/src/main.rs

@@ -69,72 +69,75 @@ mod rainbow {
 
             let posn_center = {
                 if b.contains(cursor_position) {
-                    [cursor_position.x, cursor_position.y]
+                    [cursor_position.x - b.x, cursor_position.y - b.y]
                 } else {
-                    [b.x + (b.width / 2.0), b.y + (b.height / 2.0)]
+                    [b.width / 2.0, b.height / 2.0]
                 }
             };
 
-            let posn_tl = [b.x, b.y];
+            let posn_tl = [0.0, 0.0];
-            let posn_t = [b.x + (b.width / 2.0), b.y];
+            let posn_t = [b.width / 2.0, 0.0];
-            let posn_tr = [b.x + b.width, b.y];
+            let posn_tr = [b.width, 0.0];
-            let posn_r = [b.x + b.width, b.y + (b.height / 2.0)];
+            let posn_r = [b.width, b.height / 2.0];
-            let posn_br = [b.x + b.width, b.y + b.height];
+            let posn_br = [b.width, b.height];
-            let posn_b = [b.x + (b.width / 2.0), b.y + b.height];
+            let posn_b = [(b.width / 2.0), b.height];
-            let posn_bl = [b.x, b.y + b.height];
+            let posn_bl = [0.0, b.height];
-            let posn_l = [b.x, b.y + (b.height / 2.0)];
+            let posn_l = [0.0, b.height / 2.0];
 
             (
-                Primitive::Mesh2D(std::sync::Arc::new(Mesh2D {
+                Primitive::Mesh2D {
-                    vertices: vec![
+                    origin: Point::new(b.x, b.y),
-                        Vertex2D {
+                    buffers: std::sync::Arc::new(Mesh2D {
-                            position: posn_center,
+                        vertices: vec![
-                            color: [1.0, 1.0, 1.0, 1.0],
+                            Vertex2D {
-                        },
+                                position: posn_center,
-                        Vertex2D {
+                                color: [1.0, 1.0, 1.0, 1.0],
-                            position: posn_tl,
+                            },
-                            color: color_r,
+                            Vertex2D {
-                        },
+                                position: posn_tl,
-                        Vertex2D {
+                                color: color_r,
-                            position: posn_t,
+                            },
-                            color: color_o,
+                            Vertex2D {
-                        },
+                                position: posn_t,
-                        Vertex2D {
+                                color: color_o,
-                            position: posn_tr,
+                            },
-                            color: color_y,
+                            Vertex2D {
-                        },
+                                position: posn_tr,
-                        Vertex2D {
+                                color: color_y,
-                            position: posn_r,
+                            },
-                            color: color_g,
+                            Vertex2D {
-                        },
+                                position: posn_r,
-                        Vertex2D {
+                                color: color_g,
-                            position: posn_br,
+                            },
-                            color: color_gb,
+                            Vertex2D {
-                        },
+                                position: posn_br,
-                        Vertex2D {
+                                color: color_gb,
-                            position: posn_b,
+                            },
-                            color: color_b,
+                            Vertex2D {
-                        },
+                                position: posn_b,
-                        Vertex2D {
+                                color: color_b,
-                            position: posn_bl,
+                            },
-                            color: color_i,
+                            Vertex2D {
-                        },
+                                position: posn_bl,
-                        Vertex2D {
+                                color: color_i,
-                            position: posn_l,
+                            },
-                            color: color_v,
+                            Vertex2D {
-                        },
+                                position: posn_l,
-                    ],
+                                color: color_v,
-                    indices: vec![
+                            },
-                        0, 1, 2, // TL
+                        ],
-                        0, 2, 3, // T
+                        indices: vec![
-                        0, 3, 4, // TR
+                            0, 1, 2, // TL
-                        0, 4, 5, // R
+                            0, 2, 3, // T
-                        0, 5, 6, // BR
+                            0, 3, 4, // TR
-                        0, 6, 7, // B
+                            0, 4, 5, // R
-                        0, 7, 8, // BL
+                            0, 5, 6, // BR
-                        0, 8, 1, // L
+                            0, 6, 7, // B
-                    ],
+                            0, 7, 8, // BL
-                })),
+                            0, 8, 1, // L
+                        ],
+                    }),
+                },
                 MouseCursor::OutOfBounds,
             )
         }

examples/solar_system/Cargo.toml

@@ -0,0 +1,15 @@
+[package]
+name = "solar_system"
+version = "0.1.0"
+authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
+edition = "2018"
+publish = false
+
+[features]
+canvas = []
+
+[dependencies]
+iced = { path = "../..", features = ["canvas", "async-std", "debug"] }
+iced_native = { path = "../../native" }
+async-std = { version = "1.0", features = ["unstable"] }
+rand = "0.7"

examples/solar_system/src/main.rs

@@ -0,0 +1,247 @@
+//! An animated solar system.
+//!
+//! This example showcases how to use a `Canvas` widget with transforms to draw
+//! using different coordinate systems.
+//!
+//! Inspired by the example found in the MDN docs[1].
+//!
+//! [1]: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations#An_animated_solar_system
+use iced::{
+    canvas, executor, Application, Canvas, Color, Command, Container, Element,
+    Length, Point, Settings, Size, Subscription, Vector,
+};
+
+use std::time::Instant;
+
+pub fn main() {
+    SolarSystem::run(Settings {
+        antialiasing: true,
+        ..Settings::default()
+    })
+}
+
+struct SolarSystem {
+    state: State,
+    solar_system: canvas::layer::Cache<State>,
+}
+
+#[derive(Debug, Clone, Copy)]
+enum Message {
+    Tick(Instant),
+}
+
+impl Application for SolarSystem {
+    type Executor = executor::Default;
+    type Message = Message;
+
+    fn new() -> (Self, Command<Message>) {
+        (
+            SolarSystem {
+                state: State::new(),
+                solar_system: canvas::layer::Cache::new(),
+            },
+            Command::none(),
+        )
+    }
+
+    fn title(&self) -> String {
+        String::from("Solar system - Iced")
+    }
+
+    fn update(&mut self, message: Message) -> Command<Message> {
+        match message {
+            Message::Tick(instant) => {
+                self.state.update(instant);
+                self.solar_system.clear();
+            }
+        }
+
+        Command::none()
+    }
+
+    fn subscription(&self) -> Subscription<Message> {
+        time::every(std::time::Duration::from_millis(10))
+            .map(|instant| Message::Tick(instant))
+    }
+
+    fn view(&mut self) -> Element<Message> {
+        let canvas = Canvas::new()
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .push(self.solar_system.with(&self.state));
+
+        Container::new(canvas)
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .center_x()
+            .center_y()
+            .into()
+    }
+}
+
+#[derive(Debug)]
+struct State {
+    start: Instant,
+    current: Instant,
+    stars: Vec<(Point, f32)>,
+}
+
+impl State {
+    const SUN_RADIUS: f32 = 70.0;
+    const ORBIT_RADIUS: f32 = 150.0;
+    const EARTH_RADIUS: f32 = 12.0;
+    const MOON_RADIUS: f32 = 4.0;
+    const MOON_DISTANCE: f32 = 28.0;
+
+    pub fn new() -> State {
+        let now = Instant::now();
+        let (width, height) = Settings::default().window.size;
+
+        State {
+            start: now,
+            current: now,
+            stars: {
+                use rand::Rng;
+
+                let mut rng = rand::thread_rng();
+
+                (0..100)
+                    .map(|_| {
+                        (
+                            Point::new(
+                                rng.gen_range(0.0, width as f32),
+                                rng.gen_range(0.0, height as f32),
+                            ),
+                            rng.gen_range(0.5, 1.0),
+                        )
+                    })
+                    .collect()
+            },
+        }
+    }
+
+    pub fn update(&mut self, now: Instant) {
+        self.current = now;
+    }
+}
+
+impl canvas::Drawable for State {
+    fn draw(&self, frame: &mut canvas::Frame) {
+        use canvas::{Fill, Path, Stroke};
+        use std::f32::consts::PI;
+
+        let center = frame.center();
+
+        let space = Path::new(|path| {
+            path.rectangle(Point::new(0.0, 0.0), frame.size())
+        });
+
+        let stars = Path::new(|path| {
+            for (p, size) in &self.stars {
+                path.rectangle(*p, Size::new(*size, *size));
+            }
+        });
+
+        let sun = Path::new(|path| path.circle(center, Self::SUN_RADIUS));
+        let orbit = Path::new(|path| path.circle(center, Self::ORBIT_RADIUS));
+
+        frame.fill(&space, Fill::Color(Color::BLACK));
+        frame.fill(&stars, Fill::Color(Color::WHITE));
+        frame.fill(&sun, Fill::Color(Color::from_rgb8(0xF9, 0xD7, 0x1C)));
+        frame.stroke(
+            &orbit,
+            Stroke {
+                width: 1.0,
+                color: Color::from_rgba8(0, 153, 255, 0.1),
+                ..Stroke::default()
+            },
+        );
+
+        let elapsed = self.current - self.start;
+        let elapsed_seconds = elapsed.as_secs() as f32;
+        let elapsed_millis = elapsed.subsec_millis() as f32;
+
+        frame.with_save(|frame| {
+            frame.translate(Vector::new(center.x, center.y));
+            frame.rotate(
+                (2.0 * PI / 60.0) * elapsed_seconds
+                    + (2.0 * PI / 60_000.0) * elapsed_millis,
+            );
+            frame.translate(Vector::new(Self::ORBIT_RADIUS, 0.0));
+
+            let earth = Path::new(|path| {
+                path.circle(Point::ORIGIN, Self::EARTH_RADIUS)
+            });
+
+            let shadow = Path::new(|path| {
+                path.rectangle(
+                    Point::new(0.0, -Self::EARTH_RADIUS),
+                    Size::new(
+                        Self::EARTH_RADIUS * 4.0,
+                        Self::EARTH_RADIUS * 2.0,
+                    ),
+                )
+            });
+
+            frame.fill(&earth, Fill::Color(Color::from_rgb8(0x6B, 0x93, 0xD6)));
+
+            frame.with_save(|frame| {
+                frame.rotate(
+                    ((2.0 * PI) / 6.0) * elapsed_seconds
+                        + ((2.0 * PI) / 6_000.0) * elapsed_millis,
+                );
+                frame.translate(Vector::new(0.0, Self::MOON_DISTANCE));
+
+                let moon = Path::new(|path| {
+                    path.circle(Point::ORIGIN, Self::MOON_RADIUS)
+                });
+
+                frame.fill(&moon, Fill::Color(Color::WHITE));
+            });
+
+            frame.fill(
+                &shadow,
+                Fill::Color(Color {
+                    a: 0.7,
+                    ..Color::BLACK
+                }),
+            );
+        });
+    }
+}
+
+mod time {
+    use iced::futures;
+    use std::time::Instant;
+
+    pub fn every(duration: std::time::Duration) -> iced::Subscription<Instant> {
+        iced::Subscription::from_recipe(Every(duration))
+    }
+
+    struct Every(std::time::Duration);
+
+    impl<H, I> iced_native::subscription::Recipe<H, I> for Every
+    where
+        H: std::hash::Hasher,
+    {
+        type Output = Instant;
+
+        fn hash(&self, state: &mut H) {
+            use std::hash::Hash;
+
+            std::any::TypeId::of::<Self>().hash(state);
+            self.0.hash(state);
+        }
+
+        fn stream(
+            self: Box<Self>,
+            _input: futures::stream::BoxStream<'static, I>,
+        ) -> futures::stream::BoxStream<'static, Self::Output> {
+            use futures::stream::StreamExt;
+
+            async_std::stream::interval(self.0)
+                .map(|_| Instant::now())
+                .boxed()
+        }
+    }
+}

native/src/lib.rs

@@ -52,12 +52,11 @@ mod event;
 mod hasher;
 mod mouse_cursor;
 mod runtime;
-mod size;
 mod user_interface;
 
 pub use iced_core::{
     Align, Background, Color, Font, HorizontalAlignment, Length, Point,
-    Rectangle, Vector, VerticalAlignment,
+    Rectangle, Size, Vector, VerticalAlignment,
 };
 pub use iced_futures::{executor, futures, Command};
 
@@ -72,7 +71,6 @@ pub use layout::Layout;
 pub use mouse_cursor::MouseCursor;
 pub use renderer::Renderer;
 pub use runtime::Runtime;
-pub use size::Size;
 pub use subscription::Subscription;
 pub use user_interface::{Cache, UserInterface};
 pub use widget::*;

src/application.rs

@@ -178,6 +178,11 @@ pub trait Application: Sized {
             _settings.into(),
             iced_wgpu::Settings {
                 default_font: _settings.default_font,
+                antialiasing: if _settings.antialiasing {
+                    Some(iced_wgpu::settings::Antialiasing::MSAAx4)
+                } else {
+                    None
+                },
             },
         );
 

src/lib.rs

@@ -204,5 +204,5 @@ use iced_web as common;
 
 pub use common::{
     futures, Align, Background, Color, Command, Font, HorizontalAlignment,
-    Length, Space, Subscription, Vector, VerticalAlignment,
+    Length, Point, Size, Space, Subscription, Vector, VerticalAlignment,
 };

src/settings.rs

@@ -16,6 +16,15 @@ pub struct Settings {
     /// If `None` is provided, a default system font will be chosen.
     // TODO: Add `name` for web compatibility
     pub default_font: Option<&'static [u8]>,
+
+    /// If set to true, the renderer will try to perform antialiasing for some
+    /// primitives.
+    ///
+    /// Enabling it can produce a smoother result in some widgets, like the
+    /// `Canvas`, at a performance cost.
+    ///
+    /// By default, it is disabled.
+    pub antialiasing: bool,
 }
 
 #[cfg(not(target_arch = "wasm32"))]

web/src/lib.rs

@@ -73,8 +73,8 @@ pub use dodrio;
 pub use element::Element;
 pub use hasher::Hasher;
 pub use iced_core::{
-    Align, Background, Color, Font, HorizontalAlignment, Length, Vector,
+    Align, Background, Color, Font, HorizontalAlignment, Length, Point, Size,
-    VerticalAlignment,
+    Vector, VerticalAlignment,
 };
 pub use iced_futures::{executor, futures, Command};
 pub use subscription::Subscription;

wgpu/Cargo.toml

@@ -9,6 +9,7 @@ repository = "https://github.com/hecrj/iced"
 
 [features]
 svg = ["resvg"]
+canvas = ["lyon"]
 
 [dependencies]
 iced_native = { version = "0.1.0", path = "../native" }
@@ -20,5 +21,16 @@ raw-window-handle = "0.3"
 glam = "0.8"
 font-kit = "0.4"
 log = "0.4"
-resvg = { version = "0.8", features = ["raqote-backend"], optional = true }
+
-image = { version = "0.22", optional = true }
+[dependencies.image]
+version = "0.22"
+optional = true
+
+[dependencies.resvg]
+version = "0.8"
+features = ["raqote-backend"]
+optional = true
+
+[dependencies.lyon]
+version = "0.15"
+optional = true

wgpu/src/lib.rs

@@ -25,6 +25,7 @@
 #![forbid(unsafe_code)]
 #![forbid(rust_2018_idioms)]
 pub mod defaults;
+pub mod settings;
 pub mod triangle;
 pub mod widget;
 pub mod window;
@@ -33,7 +34,6 @@ mod image;
 mod primitive;
 mod quad;
 mod renderer;
-mod settings;
 mod target;
 mod text;
 mod transformation;

wgpu/src/primitive.rs

@@ -1,5 +1,5 @@
 use iced_native::{
-    image, svg, Background, Color, Font, HorizontalAlignment, Rectangle,
+    image, svg, Background, Color, Font, HorizontalAlignment, Point, Rectangle,
     Vector, VerticalAlignment,
 };
 
@@ -73,7 +73,13 @@ pub enum Primitive {
     /// A low-level primitive to render a mesh of triangles.
     ///
     /// It can be used to render many kinds of geometry freely.
-    Mesh2D(Arc<triangle::Mesh2D>),
+    Mesh2D {
+        /// The top-left coordinate of the mesh
+        origin: Point,
+
+        /// The vertex and index buffers of the mesh
+        buffers: Arc<triangle::Mesh2D>,
+    },
 }
 
 impl Default for Primitive {

wgpu/src/renderer.rs

@@ -26,7 +26,7 @@ struct Layer<'a> {
     offset: Vector<u32>,
     quads: Vec<Quad>,
     images: Vec<Image>,
-    meshes: Vec<Arc<triangle::Mesh2D>>,
+    meshes: Vec<(Point, Arc<triangle::Mesh2D>)>,
     text: Vec<wgpu_glyph::Section<'a>>,
 }
 
@@ -51,7 +51,8 @@ impl Renderer {
         let text_pipeline = text::Pipeline::new(device, settings.default_font);
         let quad_pipeline = quad::Pipeline::new(device);
         let image_pipeline = crate::image::Pipeline::new(device);
-        let triangle_pipeline = triangle::Pipeline::new(device);
+        let triangle_pipeline =
+            triangle::Pipeline::new(device, settings.antialiasing);
 
         Self {
             quad_pipeline,
@@ -105,6 +106,8 @@ impl Renderer {
                 &layer,
                 encoder,
                 target.texture,
+                width,
+                height,
             );
         }
 
@@ -229,8 +232,8 @@ impl Renderer {
                     scale: [bounds.width, bounds.height],
                 });
             }
-            Primitive::Mesh2D(mesh) => {
+            Primitive::Mesh2D { origin, buffers } => {
-                layer.meshes.push(mesh.clone());
+                layer.meshes.push((*origin, buffers.clone()));
             }
             Primitive::Clip {
                 bounds,
@@ -308,22 +311,26 @@ impl Renderer {
         layer: &Layer<'_>,
         encoder: &mut wgpu::CommandEncoder,
         target: &wgpu::TextureView,
+        target_width: u32,
+        target_height: u32,
     ) {
         let bounds = layer.bounds * scale_factor;
 
         if layer.meshes.len() > 0 {
             let translated = transformation
+                * Transformation::scale(scale_factor, scale_factor)
                 * Transformation::translate(
-                    -(layer.offset.x as f32) * scale_factor,
+                    -(layer.offset.x as f32),
-                    -(layer.offset.y as f32) * scale_factor,
+                    -(layer.offset.y as f32),
                 );
 
             self.triangle_pipeline.draw(
                 device,
                 encoder,
                 target,
+                target_width,
+                target_height,
                 translated,
-                scale_factor,
                 &layer.meshes,
                 bounds,
             );

wgpu/src/settings.rs

@@ -1,10 +1,41 @@
+//! Configure a [`Renderer`].
+//!
+//! [`Renderer`]: struct.Renderer.html
+
 /// The settings of a [`Renderer`].
 ///
-/// [`Renderer`]: struct.Renderer.html
+/// [`Renderer`]: ../struct.Renderer.html
 #[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
 pub struct Settings {
     /// The bytes of the font that will be used by default.
     ///
     /// If `None` is provided, a default system font will be chosen.
     pub default_font: Option<&'static [u8]>,
+
+    /// The antialiasing strategy that will be used for triangle primitives.
+    pub antialiasing: Option<Antialiasing>,
+}
+
+/// An antialiasing strategy.
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Antialiasing {
+    /// Multisample AA with 2 samples
+    MSAAx2,
+    /// Multisample AA with 4 samples
+    MSAAx4,
+    /// Multisample AA with 8 samples
+    MSAAx8,
+    /// Multisample AA with 16 samples
+    MSAAx16,
+}
+
+impl Antialiasing {
+    pub(crate) fn sample_count(&self) -> u32 {
+        match self {
+            Antialiasing::MSAAx2 => 2,
+            Antialiasing::MSAAx4 => 4,
+            Antialiasing::MSAAx8 => 8,
+            Antialiasing::MSAAx16 => 16,
+        }
+    }
 }

wgpu/src/shader/blit.frag

@@ -0,0 +1,12 @@
+#version 450
+
+layout(location = 0) in vec2 v_Uv;
+
+layout(set = 0, binding = 0) uniform sampler u_Sampler;
+layout(set = 1, binding = 0) uniform texture2D u_Texture;
+
+layout(location = 0) out vec4 o_Color;
+
+void main() {
+    o_Color = texture(sampler2D(u_Texture, u_Sampler), v_Uv);
+}

wgpu/src/shader/blit.vert

@@ -0,0 +1,26 @@
+#version 450
+
+layout(location = 0) out vec2 o_Uv;
+
+const vec2 positions[6] = vec2[6](
+    vec2(-1.0, -1.0),
+    vec2(-1.0, 1.0),
+    vec2(1.0, 1.0),
+    vec2(-1.0, -1.0),
+    vec2(1.0, -1.0),
+    vec2(1.0, 1.0)
+);
+
+const vec2 uvs[6] = vec2[6](
+    vec2(0.0, 0.0),
+    vec2(0.0, 1.0),
+    vec2(1.0, 1.0),
+    vec2(0.0, 0.0),
+    vec2(1.0, 0.0),
+    vec2(1.0, 1.0)
+);
+
+void main() {
+    o_Uv = uvs[gl_VertexIndex];
+    gl_Position = vec4(positions[gl_VertexIndex], 0.0, 1.0);
+}

wgpu/src/shader/image.vert

@@ -1,24 +0,0 @@
-#version 450
-
-layout(location = 0) in vec2 v_Pos;
-layout(location = 1) in vec2 i_Pos;
-layout(location = 2) in vec2 i_Scale;
-
-layout (set = 0, binding = 0) uniform Globals {
-    mat4 u_Transform;
-};
-
-layout(location = 0) out vec2 o_Uv;
-
-void main() {
-    o_Uv = v_Pos;
-
-    mat4 i_Transform = mat4(
-        vec4(i_Scale.x, 0.0, 0.0, 0.0),
-        vec4(0.0, i_Scale.y, 0.0, 0.0),
-        vec4(0.0, 0.0, 1.0, 0.0),
-        vec4(i_Pos, 0.0, 1.0)
-    );
-
-    gl_Position = u_Transform * i_Transform * vec4(v_Pos, 0.0, 1.0);
-}

wgpu/src/shader/triangle.vert

@@ -7,11 +7,9 @@ layout(location = 0) out vec4 o_Color;
 
 layout (set = 0, binding = 0) uniform Globals {
     mat4 u_Transform;
-    float u_Scale;
 };
 
 void main() {
-    vec2 p_Position = i_Position * u_Scale;
+    gl_Position = u_Transform * vec4(i_Position, 0.0, 1.0);
-    gl_Position = u_Transform * vec4(p_Position, 0.0, 1.0);
     o_Color = i_Color;
 }

wgpu/src/triangle.rs

@@ -1,32 +1,82 @@
 //! Draw meshes of triangles.
-use crate::Transformation;
+use crate::{settings, Transformation};
-use iced_native::Rectangle;
+use iced_native::{Point, Rectangle};
 use std::{mem, sync::Arc};
 
+mod msaa;
+
+const UNIFORM_BUFFER_SIZE: usize = 100;
+const VERTEX_BUFFER_SIZE: usize = 100_000;
+const INDEX_BUFFER_SIZE: usize = 100_000;
+
 #[derive(Debug)]
 pub(crate) struct Pipeline {
     pipeline: wgpu::RenderPipeline,
+    blit: Option<msaa::Blit>,
     constants: wgpu::BindGroup,
-    constants_buffer: wgpu::Buffer,
+    uniforms_buffer: Buffer<Uniforms>,
+    vertex_buffer: Buffer<Vertex2D>,
+    index_buffer: Buffer<u32>,
+}
+
+#[derive(Debug)]
+struct Buffer<T> {
+    raw: wgpu::Buffer,
+    size: usize,
+    usage: wgpu::BufferUsage,
+    _type: std::marker::PhantomData<T>,
+}
+
+impl<T> Buffer<T> {
+    pub fn new(
+        device: &wgpu::Device,
+        size: usize,
+        usage: wgpu::BufferUsage,
+    ) -> Self {
+        let raw = device.create_buffer(&wgpu::BufferDescriptor {
+            size: (std::mem::size_of::<T>() * size) as u64,
+            usage,
+        });
+
+        Buffer {
+            raw,
+            size,
+            usage,
+            _type: std::marker::PhantomData,
+        }
+    }
+
+    pub fn ensure_capacity(&mut self, device: &wgpu::Device, size: usize) {
+        if self.size < size {
+            self.raw = device.create_buffer(&wgpu::BufferDescriptor {
+                size: (std::mem::size_of::<T>() * size) as u64,
+                usage: self.usage,
+            });
+
+            self.size = size;
+        }
+    }
 }
 
 impl Pipeline {
-    pub fn new(device: &mut wgpu::Device) -> Pipeline {
+    pub fn new(
+        device: &mut wgpu::Device,
+        antialiasing: Option<settings::Antialiasing>,
+    ) -> Pipeline {
         let constant_layout =
             device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
                 bindings: &[wgpu::BindGroupLayoutBinding {
                     binding: 0,
                     visibility: wgpu::ShaderStage::VERTEX,
-                    ty: wgpu::BindingType::UniformBuffer { dynamic: false },
+                    ty: wgpu::BindingType::UniformBuffer { dynamic: true },
                 }],
             });
 
-        let constants_buffer = device
+        let constants_buffer = Buffer::new(
-            .create_buffer_mapped(
+            device,
-                1,
+            UNIFORM_BUFFER_SIZE,
-                wgpu::BufferUsage::UNIFORM | wgpu::BufferUsage::COPY_DST,
+            wgpu::BufferUsage::UNIFORM | wgpu::BufferUsage::COPY_DST,
-            )
+        );
-            .fill_from_slice(&[Uniforms::default()]);
 
         let constant_bind_group =
             device.create_bind_group(&wgpu::BindGroupDescriptor {
@@ -34,7 +84,7 @@ impl Pipeline {
                 bindings: &[wgpu::Binding {
                     binding: 0,
                     resource: wgpu::BindingResource::Buffer {
-                        buffer: &constants_buffer,
+                        buffer: &constants_buffer.raw,
                         range: 0..std::mem::size_of::<Uniforms>() as u64,
                     },
                 }],
@@ -91,7 +141,7 @@ impl Pipeline {
                     write_mask: wgpu::ColorWrite::ALL,
                 }],
                 depth_stencil_state: None,
-                index_format: wgpu::IndexFormat::Uint16,
+                index_format: wgpu::IndexFormat::Uint32,
                 vertex_buffers: &[wgpu::VertexBufferDescriptor {
                     stride: mem::size_of::<Vertex2D>() as u64,
                     step_mode: wgpu::InputStepMode::Vertex,
@@ -110,15 +160,28 @@ impl Pipeline {
                         },
                     ],
                 }],
-                sample_count: 1,
+                sample_count: antialiasing
+                    .map(|a| a.sample_count())
+                    .unwrap_or(1),
                 sample_mask: !0,
                 alpha_to_coverage_enabled: false,
             });
 
         Pipeline {
             pipeline,
+            blit: antialiasing.map(|a| msaa::Blit::new(device, a)),
             constants: constant_bind_group,
-            constants_buffer,
+            uniforms_buffer: constants_buffer,
+            vertex_buffer: Buffer::new(
+                device,
+                VERTEX_BUFFER_SIZE,
+                wgpu::BufferUsage::VERTEX | wgpu::BufferUsage::COPY_DST,
+            ),
+            index_buffer: Buffer::new(
+                device,
+                INDEX_BUFFER_SIZE,
+                wgpu::BufferUsage::INDEX | wgpu::BufferUsage::COPY_DST,
+            ),
         }
     }
 
@@ -127,74 +190,156 @@ impl Pipeline {
         device: &mut wgpu::Device,
         encoder: &mut wgpu::CommandEncoder,
         target: &wgpu::TextureView,
+        target_width: u32,
+        target_height: u32,
         transformation: Transformation,
-        scale: f32,
+        meshes: &Vec<(Point, Arc<Mesh2D>)>,
-        meshes: &Vec<Arc<Mesh2D>>,
         bounds: Rectangle<u32>,
     ) {
-        let uniforms = Uniforms {
+        // This looks a bit crazy, but we are just counting how many vertices
-            transform: transformation.into(),
+        // and indices we will need to handle.
-            scale,
+        // TODO: Improve readability
-        };
+        let (total_vertices, total_indices) = meshes
-
+            .iter()
-        let constants_buffer = device
+            .map(|(_, mesh)| (mesh.vertices.len(), mesh.indices.len()))
-            .create_buffer_mapped(1, wgpu::BufferUsage::COPY_SRC)
+            .fold((0, 0), |(total_v, total_i), (v, i)| {
-            .fill_from_slice(&[uniforms]);
+                (total_v + v, total_i + i)
-
-        encoder.copy_buffer_to_buffer(
-            &constants_buffer,
-            0,
-            &self.constants_buffer,
-            0,
-            std::mem::size_of::<Uniforms>() as u64,
-        );
-
-        let mut render_pass =
-            encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
-                color_attachments: &[
-                    wgpu::RenderPassColorAttachmentDescriptor {
-                        attachment: target,
-                        resolve_target: None,
-                        load_op: wgpu::LoadOp::Load,
-                        store_op: wgpu::StoreOp::Store,
-                        clear_color: wgpu::Color {
-                            r: 0.0,
-                            g: 0.0,
-                            b: 0.0,
-                            a: 0.0,
-                        },
-                    },
-                ],
-                depth_stencil_attachment: None,
             });
 
-        for mesh in meshes {
+        // Then we ensure the current buffers are big enough, resizing if
-            let vertices_buffer = device
+        // necessary
+        self.uniforms_buffer.ensure_capacity(device, meshes.len());
+        self.vertex_buffer.ensure_capacity(device, total_vertices);
+        self.index_buffer.ensure_capacity(device, total_indices);
+
+        let mut uniforms: Vec<Uniforms> = Vec::with_capacity(meshes.len());
+        let mut offsets: Vec<(
+            wgpu::BufferAddress,
+            wgpu::BufferAddress,
+            usize,
+        )> = Vec::with_capacity(meshes.len());
+        let mut last_vertex = 0;
+        let mut last_index = 0;
+
+        // We upload everything upfront
+        for (origin, mesh) in meshes {
+            let transform = Uniforms {
+                transform: (transformation
+                    * Transformation::translate(origin.x, origin.y))
+                .into(),
+            };
+
+            let vertex_buffer = device
                 .create_buffer_mapped(
                     mesh.vertices.len(),
-                    wgpu::BufferUsage::VERTEX,
+                    wgpu::BufferUsage::COPY_SRC,
                 )
                 .fill_from_slice(&mesh.vertices);
 
-            let indices_buffer = device
+            let index_buffer = device
                 .create_buffer_mapped(
                     mesh.indices.len(),
-                    wgpu::BufferUsage::INDEX,
+                    wgpu::BufferUsage::COPY_SRC,
                 )
                 .fill_from_slice(&mesh.indices);
 
-            render_pass.set_pipeline(&self.pipeline);
+            encoder.copy_buffer_to_buffer(
-            render_pass.set_bind_group(0, &self.constants, &[]);
+                &vertex_buffer,
-            render_pass.set_index_buffer(&indices_buffer, 0);
+                0,
-            render_pass.set_vertex_buffers(0, &[(&vertices_buffer, 0)]);
+                &self.vertex_buffer.raw,
-            render_pass.set_scissor_rect(
+                last_vertex as u64,
-                bounds.x,
+                (std::mem::size_of::<Vertex2D>() * mesh.vertices.len()) as u64,
-                bounds.y,
-                bounds.width,
-                bounds.height,
             );
 
-            render_pass.draw_indexed(0..mesh.indices.len() as u32, 0, 0..1);
+            encoder.copy_buffer_to_buffer(
+                &index_buffer,
+                0,
+                &self.index_buffer.raw,
+                last_index as u64,
+                (std::mem::size_of::<u32>() * mesh.indices.len()) as u64,
+            );
+
+            uniforms.push(transform);
+            offsets.push((
+                last_vertex as u64,
+                last_index as u64,
+                mesh.indices.len(),
+            ));
+
+            last_vertex += mesh.vertices.len();
+            last_index += mesh.indices.len();
+        }
+
+        let uniforms_buffer = device
+            .create_buffer_mapped(uniforms.len(), wgpu::BufferUsage::COPY_SRC)
+            .fill_from_slice(&uniforms);
+
+        encoder.copy_buffer_to_buffer(
+            &uniforms_buffer,
+            0,
+            &self.uniforms_buffer.raw,
+            0,
+            (std::mem::size_of::<Uniforms>() * uniforms.len()) as u64,
+        );
+
+        {
+            let (attachment, resolve_target, load_op) =
+                if let Some(blit) = &mut self.blit {
+                    let (attachment, resolve_target) =
+                        blit.targets(device, target_width, target_height);
+
+                    (attachment, Some(resolve_target), wgpu::LoadOp::Clear)
+                } else {
+                    (target, None, wgpu::LoadOp::Load)
+                };
+
+            let mut render_pass =
+                encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
+                    color_attachments: &[
+                        wgpu::RenderPassColorAttachmentDescriptor {
+                            attachment,
+                            resolve_target,
+                            load_op,
+                            store_op: wgpu::StoreOp::Store,
+                            clear_color: wgpu::Color {
+                                r: 0.0,
+                                g: 0.0,
+                                b: 0.0,
+                                a: 0.0,
+                            },
+                        },
+                    ],
+                    depth_stencil_attachment: None,
+                });
+
+            for (i, (vertex_offset, index_offset, indices)) in
+                offsets.drain(..).enumerate()
+            {
+                render_pass.set_pipeline(&self.pipeline);
+                render_pass.set_bind_group(
+                    0,
+                    &self.constants,
+                    &[(std::mem::size_of::<Uniforms>() * i) as u64],
+                );
+                render_pass
+                    .set_index_buffer(&self.index_buffer.raw, index_offset);
+                render_pass.set_vertex_buffers(
+                    0,
+                    &[(&self.vertex_buffer.raw, vertex_offset)],
+                );
+                render_pass.set_scissor_rect(
+                    bounds.x,
+                    bounds.y,
+                    bounds.width,
+                    bounds.height,
+                );
+
+                render_pass.draw_indexed(0..indices as u32, 0, 0..1);
+            }
+        }
+
+        if let Some(blit) = &mut self.blit {
+            blit.draw(encoder, target);
         }
     }
 }
@@ -203,14 +348,12 @@ impl Pipeline {
 #[derive(Debug, Clone, Copy)]
 struct Uniforms {
     transform: [f32; 16],
-    scale: f32,
 }
 
 impl Default for Uniforms {
     fn default() -> Self {
         Self {
             transform: *Transformation::identity().as_ref(),
-            scale: 1.0,
         }
     }
 }
@@ -235,5 +378,5 @@ pub struct Mesh2D {
     /// 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<u16>,
+    pub indices: Vec<u32>,
 }

wgpu/src/triangle/msaa.rs

@@ -0,0 +1,258 @@
+use crate::settings;
+
+#[derive(Debug)]
+pub struct Blit {
+    pipeline: wgpu::RenderPipeline,
+    constants: wgpu::BindGroup,
+    texture_layout: wgpu::BindGroupLayout,
+    sample_count: u32,
+    targets: Option<Targets>,
+}
+
+impl Blit {
+    pub fn new(
+        device: &wgpu::Device,
+        antialiasing: settings::Antialiasing,
+    ) -> Blit {
+        let sampler = device.create_sampler(&wgpu::SamplerDescriptor {
+            address_mode_u: wgpu::AddressMode::ClampToEdge,
+            address_mode_v: wgpu::AddressMode::ClampToEdge,
+            address_mode_w: wgpu::AddressMode::ClampToEdge,
+            mag_filter: wgpu::FilterMode::Linear,
+            min_filter: wgpu::FilterMode::Linear,
+            mipmap_filter: wgpu::FilterMode::Linear,
+            lod_min_clamp: -100.0,
+            lod_max_clamp: 100.0,
+            compare_function: wgpu::CompareFunction::Always,
+        });
+
+        let constant_layout =
+            device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
+                bindings: &[wgpu::BindGroupLayoutBinding {
+                    binding: 0,
+                    visibility: wgpu::ShaderStage::FRAGMENT,
+                    ty: wgpu::BindingType::Sampler,
+                }],
+            });
+
+        let constant_bind_group =
+            device.create_bind_group(&wgpu::BindGroupDescriptor {
+                layout: &constant_layout,
+                bindings: &[wgpu::Binding {
+                    binding: 0,
+                    resource: wgpu::BindingResource::Sampler(&sampler),
+                }],
+            });
+
+        let texture_layout =
+            device.create_bind_group_layout(&wgpu::BindGroupLayoutDescriptor {
+                bindings: &[wgpu::BindGroupLayoutBinding {
+                    binding: 0,
+                    visibility: wgpu::ShaderStage::FRAGMENT,
+                    ty: wgpu::BindingType::SampledTexture {
+                        multisampled: false,
+                        dimension: wgpu::TextureViewDimension::D2,
+                    },
+                }],
+            });
+
+        let layout =
+            device.create_pipeline_layout(&wgpu::PipelineLayoutDescriptor {
+                bind_group_layouts: &[&constant_layout, &texture_layout],
+            });
+
+        let vs = include_bytes!("../shader/blit.vert.spv");
+        let vs_module = device.create_shader_module(
+            &wgpu::read_spirv(std::io::Cursor::new(&vs[..]))
+                .expect("Read blit vertex shader as SPIR-V"),
+        );
+
+        let fs = include_bytes!("../shader/blit.frag.spv");
+        let fs_module = device.create_shader_module(
+            &wgpu::read_spirv(std::io::Cursor::new(&fs[..]))
+                .expect("Read blit fragment shader as SPIR-V"),
+        );
+
+        let pipeline =
+            device.create_render_pipeline(&wgpu::RenderPipelineDescriptor {
+                layout: &layout,
+                vertex_stage: wgpu::ProgrammableStageDescriptor {
+                    module: &vs_module,
+                    entry_point: "main",
+                },
+                fragment_stage: Some(wgpu::ProgrammableStageDescriptor {
+                    module: &fs_module,
+                    entry_point: "main",
+                }),
+                rasterization_state: Some(wgpu::RasterizationStateDescriptor {
+                    front_face: wgpu::FrontFace::Cw,
+                    cull_mode: wgpu::CullMode::None,
+                    depth_bias: 0,
+                    depth_bias_slope_scale: 0.0,
+                    depth_bias_clamp: 0.0,
+                }),
+                primitive_topology: wgpu::PrimitiveTopology::TriangleList,
+                color_states: &[wgpu::ColorStateDescriptor {
+                    format: wgpu::TextureFormat::Bgra8UnormSrgb,
+                    color_blend: wgpu::BlendDescriptor {
+                        src_factor: wgpu::BlendFactor::SrcAlpha,
+                        dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
+                        operation: wgpu::BlendOperation::Add,
+                    },
+                    alpha_blend: wgpu::BlendDescriptor {
+                        src_factor: wgpu::BlendFactor::One,
+                        dst_factor: wgpu::BlendFactor::OneMinusSrcAlpha,
+                        operation: wgpu::BlendOperation::Add,
+                    },
+                    write_mask: wgpu::ColorWrite::ALL,
+                }],
+                depth_stencil_state: None,
+                index_format: wgpu::IndexFormat::Uint16,
+                vertex_buffers: &[],
+                sample_count: 1,
+                sample_mask: !0,
+                alpha_to_coverage_enabled: false,
+            });
+
+        Blit {
+            pipeline,
+            constants: constant_bind_group,
+            texture_layout: texture_layout,
+            sample_count: antialiasing.sample_count(),
+            targets: None,
+        }
+    }
+
+    pub fn targets(
+        &mut self,
+        device: &wgpu::Device,
+        width: u32,
+        height: u32,
+    ) -> (&wgpu::TextureView, &wgpu::TextureView) {
+        match &mut self.targets {
+            None => {
+                self.targets = Some(Targets::new(
+                    &device,
+                    &self.texture_layout,
+                    self.sample_count,
+                    width,
+                    height,
+                ));
+            }
+            Some(targets) => {
+                if targets.width != width || targets.height != height {
+                    self.targets = Some(Targets::new(
+                        &device,
+                        &self.texture_layout,
+                        self.sample_count,
+                        width,
+                        height,
+                    ));
+                }
+            }
+        }
+
+        let targets = self.targets.as_ref().unwrap();
+
+        (&targets.attachment, &targets.resolve)
+    }
+
+    pub fn draw(
+        &self,
+        encoder: &mut wgpu::CommandEncoder,
+        target: &wgpu::TextureView,
+    ) {
+        let mut render_pass =
+            encoder.begin_render_pass(&wgpu::RenderPassDescriptor {
+                color_attachments: &[
+                    wgpu::RenderPassColorAttachmentDescriptor {
+                        attachment: target,
+                        resolve_target: None,
+                        load_op: wgpu::LoadOp::Load,
+                        store_op: wgpu::StoreOp::Store,
+                        clear_color: wgpu::Color {
+                            r: 0.0,
+                            g: 0.0,
+                            b: 0.0,
+                            a: 0.0,
+                        },
+                    },
+                ],
+                depth_stencil_attachment: None,
+            });
+
+        render_pass.set_pipeline(&self.pipeline);
+        render_pass.set_bind_group(0, &self.constants, &[]);
+        render_pass.set_bind_group(
+            1,
+            &self.targets.as_ref().unwrap().bind_group,
+            &[],
+        );
+        render_pass.draw(0..6, 0..1);
+    }
+}
+
+#[derive(Debug)]
+struct Targets {
+    attachment: wgpu::TextureView,
+    resolve: wgpu::TextureView,
+    bind_group: wgpu::BindGroup,
+    width: u32,
+    height: u32,
+}
+
+impl Targets {
+    pub fn new(
+        device: &wgpu::Device,
+        texture_layout: &wgpu::BindGroupLayout,
+        sample_count: u32,
+        width: u32,
+        height: u32,
+    ) -> Targets {
+        let extent = wgpu::Extent3d {
+            width,
+            height,
+            depth: 1,
+        };
+
+        let attachment = device.create_texture(&wgpu::TextureDescriptor {
+            size: extent,
+            array_layer_count: 1,
+            mip_level_count: 1,
+            sample_count,
+            dimension: wgpu::TextureDimension::D2,
+            format: wgpu::TextureFormat::Bgra8UnormSrgb,
+            usage: wgpu::TextureUsage::OUTPUT_ATTACHMENT,
+        });
+
+        let resolve = device.create_texture(&wgpu::TextureDescriptor {
+            size: extent,
+            array_layer_count: 1,
+            mip_level_count: 1,
+            sample_count: 1,
+            dimension: wgpu::TextureDimension::D2,
+            format: wgpu::TextureFormat::Bgra8UnormSrgb,
+            usage: wgpu::TextureUsage::OUTPUT_ATTACHMENT
+                | wgpu::TextureUsage::SAMPLED,
+        });
+
+        let attachment = attachment.create_default_view();
+        let resolve = resolve.create_default_view();
+
+        let bind_group = device.create_bind_group(&wgpu::BindGroupDescriptor {
+            layout: texture_layout,
+            bindings: &[wgpu::Binding {
+                binding: 0,
+                resource: wgpu::BindingResource::TextureView(&resolve),
+            }],
+        });
+
+        Targets {
+            attachment,
+            resolve,
+            bind_group,
+            width,
+            height,
+        }
+    }
+}

wgpu/src/widget.rs

@@ -32,3 +32,10 @@ pub use scrollable::Scrollable;
 pub use slider::Slider;
 #[doc(no_inline)]
 pub use text_input::TextInput;
+
+#[cfg(feature = "canvas")]
+pub mod canvas;
+
+#[cfg(feature = "canvas")]
+#[doc(no_inline)]
+pub use canvas::Canvas;

wgpu/src/widget/canvas.rs

@@ -0,0 +1,149 @@
+//! Draw 2D graphics for your users.
+//!
+//! A [`Canvas`] widget can be used to draw different kinds of 2D shapes in a
+//! [`Frame`]. It can be used for animation, data visualization, game graphics,
+//! and more!
+//!
+//! [`Canvas`]: struct.Canvas.html
+//! [`Frame`]: struct.Frame.html
+use crate::{Defaults, Primitive, Renderer};
+
+use iced_native::{
+    layout, Element, Hasher, Layout, Length, MouseCursor, Point, Size, Widget,
+};
+use std::hash::Hash;
+
+pub mod layer;
+pub mod path;
+
+mod drawable;
+mod fill;
+mod frame;
+mod stroke;
+
+pub use drawable::Drawable;
+pub use fill::Fill;
+pub use frame::Frame;
+pub use layer::Layer;
+pub use path::Path;
+pub use stroke::{LineCap, LineJoin, Stroke};
+
+/// A widget capable of drawing 2D graphics.
+///
+/// A [`Canvas`] may contain multiple layers. A [`Layer`] is drawn using the
+/// painter's algorithm. In other words, layers will be drawn on top of each in
+/// the same order they are pushed into the [`Canvas`].
+///
+/// [`Canvas`]: struct.Canvas.html
+/// [`Layer`]: layer/trait.Layer.html
+#[derive(Debug)]
+pub struct Canvas<'a> {
+    width: Length,
+    height: Length,
+    layers: Vec<Box<dyn Layer + 'a>>,
+}
+
+impl<'a> Canvas<'a> {
+    const DEFAULT_SIZE: u16 = 100;
+
+    /// Creates a new [`Canvas`] with no layers.
+    ///
+    /// [`Canvas`]: struct.Canvas.html
+    pub fn new() -> Self {
+        Canvas {
+            width: Length::Units(Self::DEFAULT_SIZE),
+            height: Length::Units(Self::DEFAULT_SIZE),
+            layers: Vec::new(),
+        }
+    }
+
+    /// Sets the width of the [`Canvas`].
+    ///
+    /// [`Canvas`]: struct.Canvas.html
+    pub fn width(mut self, width: Length) -> Self {
+        self.width = width;
+        self
+    }
+
+    /// Sets the height of the [`Canvas`].
+    ///
+    /// [`Canvas`]: struct.Canvas.html
+    pub fn height(mut self, height: Length) -> Self {
+        self.height = height;
+        self
+    }
+
+    /// Adds a [`Layer`] to the [`Canvas`].
+    ///
+    /// It will be drawn on top of previous layers.
+    ///
+    /// [`Layer`]: layer/trait.Layer.html
+    /// [`Canvas`]: struct.Canvas.html
+    pub fn push(mut self, layer: impl Layer + 'a) -> Self {
+        self.layers.push(Box::new(layer));
+        self
+    }
+}
+
+impl<'a, Message> Widget<Message, Renderer> for Canvas<'a> {
+    fn width(&self) -> Length {
+        self.width
+    }
+
+    fn height(&self) -> Length {
+        self.height
+    }
+
+    fn layout(
+        &self,
+        _renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        let limits = limits.width(self.width).height(self.height);
+        let size = limits.resolve(Size::ZERO);
+
+        layout::Node::new(size)
+    }
+
+    fn draw(
+        &self,
+        _renderer: &mut Renderer,
+        _defaults: &Defaults,
+        layout: Layout<'_>,
+        _cursor_position: Point,
+    ) -> (Primitive, MouseCursor) {
+        let bounds = layout.bounds();
+        let origin = Point::new(bounds.x, bounds.y);
+        let size = Size::new(bounds.width, bounds.height);
+
+        (
+            Primitive::Group {
+                primitives: self
+                    .layers
+                    .iter()
+                    .map(|layer| Primitive::Mesh2D {
+                        origin,
+                        buffers: layer.draw(size),
+                    })
+                    .collect(),
+            },
+            MouseCursor::Idle,
+        )
+    }
+
+    fn hash_layout(&self, state: &mut Hasher) {
+        std::any::TypeId::of::<Canvas<'static>>().hash(state);
+
+        self.width.hash(state);
+        self.height.hash(state);
+    }
+}
+
+impl<'a, Message> From<Canvas<'a>> for Element<'a, Message, Renderer>
+where
+    Message: 'static,
+{
+    fn from(canvas: Canvas<'a>) -> Element<'a, Message, Renderer> {
+        Element::new(canvas)
+    }
+}

wgpu/src/widget/canvas/drawable.rs

@@ -0,0 +1,12 @@
+use crate::canvas::Frame;
+
+/// A type that can be drawn on a [`Frame`].
+///
+/// [`Frame`]: struct.Frame.html
+pub trait Drawable {
+    /// Draws the [`Drawable`] on the given [`Frame`].
+    ///
+    /// [`Drawable`]: trait.Drawable.html
+    /// [`Frame`]: struct.Frame.html
+    fn draw(&self, frame: &mut Frame);
+}

wgpu/src/widget/canvas/fill.rs

@@ -0,0 +1,14 @@
+use iced_native::Color;
+
+/// The style used to fill geometry.
+#[derive(Debug, Clone, Copy)]
+pub enum Fill {
+    /// Fill with a color.
+    Color(Color),
+}
+
+impl Default for Fill {
+    fn default() -> Fill {
+        Fill::Color(Color::BLACK)
+    }
+}

wgpu/src/widget/canvas/frame.rs

@@ -0,0 +1,255 @@
+use iced_native::{Point, Size, Vector};
+
+use crate::{
+    canvas::{Fill, Path, Stroke},
+    triangle,
+};
+
+/// The frame of a [`Canvas`].
+///
+/// [`Canvas`]: struct.Canvas.html
+#[derive(Debug)]
+pub struct Frame {
+    width: f32,
+    height: f32,
+    buffers: lyon::tessellation::VertexBuffers<triangle::Vertex2D, u32>,
+    transforms: Transforms,
+}
+
+#[derive(Debug)]
+struct Transforms {
+    previous: Vec<Transform>,
+    current: Transform,
+}
+
+#[derive(Debug, Clone, Copy)]
+struct Transform {
+    raw: lyon::math::Transform,
+    is_identity: bool,
+}
+
+impl Frame {
+    /// Creates a new empty [`Frame`] with the given dimensions.
+    ///
+    /// The default coordinate system of a [`Frame`] has its origin at the
+    /// top-left corner of its bounds.
+    ///
+    /// [`Frame`]: struct.Frame.html
+    pub fn new(width: f32, height: f32) -> Frame {
+        Frame {
+            width,
+            height,
+            buffers: lyon::tessellation::VertexBuffers::new(),
+            transforms: Transforms {
+                previous: Vec::new(),
+                current: Transform {
+                    raw: lyon::math::Transform::identity(),
+                    is_identity: true,
+                },
+            },
+        }
+    }
+
+    /// Returns the width of the [`Frame`].
+    ///
+    /// [`Frame`]: struct.Frame.html
+    #[inline]
+    pub fn width(&self) -> f32 {
+        self.width
+    }
+
+    /// Returns the width of the [`Frame`].
+    ///
+    /// [`Frame`]: struct.Frame.html
+    #[inline]
+    pub fn height(&self) -> f32 {
+        self.height
+    }
+
+    /// Returns the dimensions of the [`Frame`].
+    ///
+    /// [`Frame`]: struct.Frame.html
+    #[inline]
+    pub fn size(&self) -> Size {
+        Size::new(self.width, self.height)
+    }
+
+    /// Returns the coordinate of the center of the [`Frame`].
+    ///
+    /// [`Frame`]: struct.Frame.html
+    #[inline]
+    pub fn center(&self) -> Point {
+        Point::new(self.width / 2.0, self.height / 2.0)
+    }
+
+    /// Draws the given [`Path`] on the [`Frame`] by filling it with the
+    /// provided style.
+    ///
+    /// [`Path`]: path/struct.Path.html
+    /// [`Frame`]: struct.Frame.html
+    pub fn fill(&mut self, path: &Path, fill: Fill) {
+        use lyon::tessellation::{
+            BuffersBuilder, FillOptions, FillTessellator,
+        };
+
+        let mut buffers = BuffersBuilder::new(
+            &mut self.buffers,
+            FillVertex(match fill {
+                Fill::Color(color) => color.into_linear(),
+            }),
+        );
+
+        let mut tessellator = FillTessellator::new();
+
+        let result = if self.transforms.current.is_identity {
+            tessellator.tessellate_path(
+                path.raw(),
+                &FillOptions::default(),
+                &mut buffers,
+            )
+        } else {
+            let path = path.transformed(&self.transforms.current.raw);
+
+            tessellator.tessellate_path(
+                path.raw(),
+                &FillOptions::default(),
+                &mut buffers,
+            )
+        };
+
+        let _ = result.expect("Tessellate path");
+    }
+
+    /// Draws the stroke of the given [`Path`] on the [`Frame`] with the
+    /// provided style.
+    ///
+    /// [`Path`]: path/struct.Path.html
+    /// [`Frame`]: struct.Frame.html
+    pub fn stroke(&mut self, path: &Path, stroke: Stroke) {
+        use lyon::tessellation::{
+            BuffersBuilder, StrokeOptions, StrokeTessellator,
+        };
+
+        let mut buffers = BuffersBuilder::new(
+            &mut self.buffers,
+            StrokeVertex(stroke.color.into_linear()),
+        );
+
+        let mut tessellator = StrokeTessellator::new();
+
+        let mut options = 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();
+
+        let result = if self.transforms.current.is_identity {
+            tessellator.tessellate_path(path.raw(), &options, &mut buffers)
+        } else {
+            let path = path.transformed(&self.transforms.current.raw);
+
+            tessellator.tessellate_path(path.raw(), &options, &mut buffers)
+        };
+
+        let _ = result.expect("Stroke path");
+    }
+
+    /// 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.
+    ///
+    /// [`Frame`]: struct.Frame.html
+    #[inline]
+    pub fn with_save(&mut self, f: impl FnOnce(&mut Frame)) {
+        self.transforms.previous.push(self.transforms.current);
+
+        f(self);
+
+        self.transforms.current = self.transforms.previous.pop().unwrap();
+    }
+
+    /// Applies a translation to the current transform of the [`Frame`].
+    ///
+    /// [`Frame`]: struct.Frame.html
+    #[inline]
+    pub fn translate(&mut self, translation: Vector) {
+        self.transforms.current.raw = self
+            .transforms
+            .current
+            .raw
+            .pre_translate(lyon::math::Vector::new(
+                translation.x,
+                translation.y,
+            ));
+        self.transforms.current.is_identity = false;
+    }
+
+    /// Applies a rotation to the current transform of the [`Frame`].
+    ///
+    /// [`Frame`]: struct.Frame.html
+    #[inline]
+    pub fn rotate(&mut self, angle: f32) {
+        self.transforms.current.raw = self
+            .transforms
+            .current
+            .raw
+            .pre_rotate(lyon::math::Angle::radians(-angle));
+        self.transforms.current.is_identity = false;
+    }
+
+    /// Applies a scaling to the current transform of the [`Frame`].
+    ///
+    /// [`Frame`]: struct.Frame.html
+    #[inline]
+    pub fn scale(&mut self, scale: f32) {
+        self.transforms.current.raw =
+            self.transforms.current.raw.pre_scale(scale, scale);
+        self.transforms.current.is_identity = false;
+    }
+
+    /// Produces the geometry that has been drawn on the [`Frame`].
+    ///
+    /// [`Frame`]: struct.Frame.html
+    pub fn into_mesh(self) -> triangle::Mesh2D {
+        triangle::Mesh2D {
+            vertices: self.buffers.vertices,
+            indices: self.buffers.indices,
+        }
+    }
+}
+
+struct FillVertex([f32; 4]);
+
+impl lyon::tessellation::FillVertexConstructor<triangle::Vertex2D>
+    for FillVertex
+{
+    fn new_vertex(
+        &mut self,
+        position: lyon::math::Point,
+        _attributes: lyon::tessellation::FillAttributes<'_>,
+    ) -> triangle::Vertex2D {
+        triangle::Vertex2D {
+            position: [position.x, position.y],
+            color: self.0,
+        }
+    }
+}
+
+struct StrokeVertex([f32; 4]);
+
+impl lyon::tessellation::StrokeVertexConstructor<triangle::Vertex2D>
+    for StrokeVertex
+{
+    fn new_vertex(
+        &mut self,
+        position: lyon::math::Point,
+        _attributes: lyon::tessellation::StrokeAttributes<'_, '_>,
+    ) -> triangle::Vertex2D {
+        triangle::Vertex2D {
+            position: [position.x, position.y],
+            color: self.0,
+        }
+    }
+}

wgpu/src/widget/canvas/layer.rs

@@ -0,0 +1,25 @@
+//! Produce, store, and reuse geometry.
+mod cache;
+
+pub use cache::Cache;
+
+use crate::triangle;
+
+use iced_native::Size;
+use std::sync::Arc;
+
+/// A layer that can be presented at a [`Canvas`].
+///
+/// [`Canvas`]: ../struct.Canvas.html
+pub trait Layer: std::fmt::Debug {
+    /// Draws the [`Layer`] in the given bounds and produces [`Mesh2D`] as a
+    /// result.
+    ///
+    /// The [`Layer`] may choose to store the produced [`Mesh2D`] locally and
+    /// only recompute it when the bounds change, its contents change, or is
+    /// otherwise explicitly cleared by other means.
+    ///
+    /// [`Layer`]: trait.Layer.html
+    /// [`Mesh2D`]: ../../../triangle/struct.Mesh2D.html
+    fn draw(&self, bounds: Size) -> Arc<triangle::Mesh2D>;
+}

wgpu/src/widget/canvas/layer/cache.rs

@@ -0,0 +1,101 @@
+use crate::{
+    canvas::{Drawable, Frame, Layer},
+    triangle,
+};
+
+use iced_native::Size;
+use std::cell::RefCell;
+use std::marker::PhantomData;
+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.
+///
+/// [`Layer`]: ../trait.Layer.html
+/// [`Cached`]: struct.Cached.html
+#[derive(Debug)]
+pub struct Cache<T: Drawable> {
+    input: PhantomData<T>,
+    state: RefCell<State>,
+}
+
+#[derive(Debug)]
+enum State {
+    Empty,
+    Filled {
+        mesh: Arc<triangle::Mesh2D>,
+        bounds: Size,
+    },
+}
+
+impl<T> Cache<T>
+where
+    T: Drawable + std::fmt::Debug,
+{
+    /// Creates a new empty [`Cache`].
+    ///
+    /// [`Cache`]: struct.Cache.html
+    pub fn new() -> Self {
+        Cache {
+            input: PhantomData,
+            state: RefCell::new(State::Empty),
+        }
+    }
+
+    /// Clears the cache, forcing a redraw the next time it is used.
+    ///
+    /// [`Cached`]: struct.Cached.html
+    pub fn clear(&mut self) {
+        *self.state.borrow_mut() = State::Empty;
+    }
+
+    /// Binds the [`Cache`] with some data, producing a [`Layer`] that can be
+    /// added to a [`Canvas`].
+    ///
+    /// [`Cache`]: struct.Cache.html
+    /// [`Layer`]: ../trait.Layer.html
+    /// [`Canvas`]: ../../struct.Canvas.html
+    pub fn with<'a>(&'a self, input: &'a T) -> impl Layer + 'a {
+        Bind {
+            cache: self,
+            input: input,
+        }
+    }
+}
+
+#[derive(Debug)]
+struct Bind<'a, T: Drawable> {
+    cache: &'a Cache<T>,
+    input: &'a T,
+}
+
+impl<'a, T> Layer for Bind<'a, T>
+where
+    T: Drawable + std::fmt::Debug,
+{
+    fn draw(&self, current_bounds: Size) -> Arc<triangle::Mesh2D> {
+        use std::ops::Deref;
+
+        if let State::Filled { mesh, bounds } =
+            self.cache.state.borrow().deref()
+        {
+            if *bounds == current_bounds {
+                return mesh.clone();
+            }
+        }
+
+        let mut frame = Frame::new(current_bounds.width, current_bounds.height);
+        self.input.draw(&mut frame);
+
+        let mesh = Arc::new(frame.into_mesh());
+
+        *self.cache.state.borrow_mut() = State::Filled {
+            mesh: mesh.clone(),
+            bounds: current_bounds,
+        };
+
+        mesh
+    }
+}

wgpu/src/widget/canvas/path.rs

@@ -0,0 +1,49 @@
+//! Build different kinds of 2D shapes.
+pub mod arc;
+
+mod builder;
+
+pub use arc::Arc;
+pub use builder::Builder;
+
+/// An immutable set of points that may or may not be connected.
+///
+/// A single [`Path`] can represent different kinds of 2D shapes!
+///
+/// [`Path`]: struct.Path.html
+#[derive(Debug, Clone)]
+pub struct Path {
+    raw: lyon::path::Path,
+}
+
+impl Path {
+    /// Creates a new [`Path`] with the provided closure.
+    ///
+    /// Use the [`Builder`] to configure your [`Path`].
+    ///
+    /// [`Path`]: struct.Path.html
+    /// [`Builder`]: struct.Builder.html
+    pub fn new(f: impl FnOnce(&mut Builder)) -> Self {
+        let mut builder = Builder::new();
+
+        // TODO: Make it pure instead of side-effect-based (?)
+        f(&mut builder);
+
+        builder.build()
+    }
+
+    #[inline]
+    pub(crate) fn raw(&self) -> &lyon::path::Path {
+        &self.raw
+    }
+
+    #[inline]
+    pub(crate) fn transformed(
+        &self,
+        transform: &lyon::math::Transform,
+    ) -> Path {
+        Path {
+            raw: self.raw.transformed(transform),
+        }
+    }
+}

wgpu/src/widget/canvas/path/arc.rs

@@ -0,0 +1,44 @@
+//! Build and draw curves.
+use iced_native::{Point, Vector};
+
+/// A segment of a differentiable curve.
+#[derive(Debug, Clone, Copy)]
+pub struct Arc {
+    /// The center of the arc.
+    pub center: Point,
+    /// The radius of the arc.
+    pub radius: f32,
+    /// The start of the segment's angle, clockwise rotation.
+    pub start_angle: f32,
+    /// The end of the segment's angle, clockwise rotation.
+    pub end_angle: f32,
+}
+
+/// An elliptical [`Arc`].
+///
+/// [`Arc`]: struct.Arc.html
+#[derive(Debug, Clone, Copy)]
+pub struct Elliptical {
+    /// The center of the arc.
+    pub center: Point,
+    /// The radii of the arc's ellipse, defining its axes.
+    pub radii: Vector,
+    /// The rotation of the arc's ellipse.
+    pub rotation: f32,
+    /// The start of the segment's angle, clockwise rotation.
+    pub start_angle: f32,
+    /// The end of the segment's angle, clockwise rotation.
+    pub end_angle: f32,
+}
+
+impl From<Arc> for Elliptical {
+    fn from(arc: Arc) -> Elliptical {
+        Elliptical {
+            center: arc.center,
+            radii: Vector::new(arc.radius, arc.radius),
+            rotation: 0.0,
+            start_angle: arc.start_angle,
+            end_angle: arc.end_angle,
+        }
+    }
+}

wgpu/src/widget/canvas/path/builder.rs

@@ -0,0 +1,177 @@
+use crate::canvas::path::{arc, Arc, Path};
+
+use iced_native::{Point, Size};
+use lyon::path::builder::{Build, FlatPathBuilder, PathBuilder, SvgBuilder};
+
+/// A [`Path`] builder.
+///
+/// Once a [`Path`] is built, it can no longer be mutated.
+///
+/// [`Path`]: struct.Path.html
+#[allow(missing_debug_implementations)]
+pub struct Builder {
+    raw: lyon::path::builder::SvgPathBuilder<lyon::path::Builder>,
+}
+
+impl Builder {
+    /// Creates a new [`Builder`].
+    ///
+    /// [`Builder`]: struct.Builder.html
+    pub fn new() -> Builder {
+        Builder {
+            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));
+    }
+
+    /// Connects the last point in the [`Path`] to the given `Point` with a
+    /// straight line.
+    ///
+    /// [`Path`]: struct.Path.html
+    #[inline]
+    pub fn line_to(&mut self, point: Point) {
+        let _ = self.raw.line_to(lyon::math::Point::new(point.x, point.y));
+    }
+
+    /// Adds an [`Arc`] to the [`Path`] from `start_angle` to `end_angle` in
+    /// a clockwise direction.
+    ///
+    /// [`Arc`]: struct.Arc.html
+    /// [`Path`]: struct.Path.html
+    #[inline]
+    pub fn arc(&mut self, arc: Arc) {
+        self.ellipse(arc.into());
+    }
+
+    /// Adds a circular arc to the [`Path`] with the given control points and
+    /// radius.
+    ///
+    /// The arc is connected to the previous point by a straight line, if
+    /// necessary.
+    ///
+    /// [`Path`]: struct.Path.html
+    pub fn arc_to(&mut self, a: Point, b: Point, radius: f32) {
+        use lyon::{math, path};
+
+        let a = math::Point::new(a.x, a.y);
+
+        if self.raw.current_position() != a {
+            let _ = self.raw.line_to(a);
+        }
+
+        let _ = self.raw.arc_to(
+            math::Vector::new(radius, radius),
+            math::Angle::radians(0.0),
+            path::ArcFlags::default(),
+            math::Point::new(b.x, b.y),
+        );
+    }
+
+    /// Adds an [`Ellipse`] to the [`Path`] using a clockwise direction.
+    ///
+    /// [`Ellipse`]: struct.Arc.html
+    /// [`Path`]: struct.Path.html
+    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),
+            x_rotation: math::Angle::radians(arc.rotation),
+            start_angle: math::Angle::radians(arc.start_angle),
+            sweep_angle: math::Angle::radians(arc.end_angle),
+        };
+
+        let _ = self.raw.move_to(arc.sample(0.0));
+
+        arc.for_each_quadratic_bezier(&mut |curve| {
+            let _ = self.raw.quadratic_bezier_to(curve.ctrl, curve.to);
+        });
+    }
+
+    /// Adds a cubic Bézier curve to the [`Path`] given its two control points
+    /// and its end point.
+    ///
+    /// [`Path`]: struct.Path.html
+    #[inline]
+    pub fn bezier_curve_to(
+        &mut self,
+        control_a: Point,
+        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),
+            math::Point::new(to.x, to.y),
+        );
+    }
+
+    /// Adds a quadratic Bézier curve to the [`Path`] given its control point
+    /// and its end point.
+    ///
+    /// [`Path`]: struct.Path.html
+    #[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),
+        );
+    }
+
+    /// Adds a rectangle to the [`Path`] given its top-left corner coordinate
+    /// and its `Size`.
+    ///
+    /// [`Path`]: struct.Path.html
+    #[inline]
+    pub fn rectangle(&mut self, p: Point, size: Size) {
+        self.move_to(p);
+        self.line_to(Point::new(p.x + size.width, p.y));
+        self.line_to(Point::new(p.x + size.width, p.y + size.height));
+        self.line_to(Point::new(p.x, p.y + size.height));
+        self.close();
+    }
+
+    /// Adds a circle to the [`Path`] given its center coordinate and its
+    /// radius.
+    ///
+    /// [`Path`]: struct.Path.html
+    #[inline]
+    pub fn circle(&mut self, center: Point, radius: f32) {
+        self.arc(Arc {
+            center,
+            radius,
+            start_angle: 0.0,
+            end_angle: 2.0 * std::f32::consts::PI,
+        });
+    }
+
+    /// Closes the current sub-path in the [`Path`] with a straight line to
+    /// the starting point.
+    ///
+    /// [`Path`]: struct.Path.html
+    #[inline]
+    pub fn close(&mut self) {
+        self.raw.close()
+    }
+
+    /// Builds the [`Path`] of this [`Builder`].
+    ///
+    /// [`Path`]: struct.Path.html
+    /// [`Builder`]: struct.Builder.html
+    #[inline]
+    pub fn build(self) -> Path {
+        Path {
+            raw: self.raw.build(),
+        }
+    }
+}

wgpu/src/widget/canvas/stroke.rs

@@ -0,0 +1,83 @@
+use iced_native::Color;
+
+/// The style of a stroke.
+#[derive(Debug, Clone, Copy)]
+pub struct Stroke {
+    /// The color of the stroke.
+    pub color: Color,
+    /// The distance between the two edges of the stroke.
+    pub width: f32,
+    /// The shape to be used at the end of open subpaths when they are stroked.
+    pub line_cap: LineCap,
+    /// The shape to be used at the corners of paths or basic shapes when they
+    /// are stroked.
+    pub line_join: LineJoin,
+}
+
+impl Default for Stroke {
+    fn default() -> Stroke {
+        Stroke {
+            color: Color::BLACK,
+            width: 1.0,
+            line_cap: LineCap::default(),
+            line_join: LineJoin::default(),
+        }
+    }
+}
+
+/// The shape used at the end of open subpaths when they are stroked.
+#[derive(Debug, Clone, Copy)]
+pub enum LineCap {
+    /// The stroke for each sub-path does not extend beyond its two endpoints.
+    Butt,
+    /// At the end of each sub-path, the shape representing the stroke will be
+    /// extended by a square.
+    Square,
+    /// At the end of each sub-path, the shape representing the stroke will be
+    /// extended by a semicircle.
+    Round,
+}
+
+impl Default for LineCap {
+    fn default() -> LineCap {
+        LineCap::Butt
+    }
+}
+
+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)]
+pub enum LineJoin {
+    /// A sharp corner.
+    Miter,
+    /// A round corner.
+    Round,
+    /// A bevelled corner.
+    Bevel,
+}
+
+impl Default for LineJoin {
+    fn default() -> LineJoin {
+        LineJoin::Miter
+    }
+}
+
+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,
+        }
+    }
+}

wgpu/src/window/backend.rs

@@ -18,7 +18,11 @@ impl iced_native::window::Backend for Backend {
 
     fn new(settings: Self::Settings) -> (Backend, Renderer) {
         let adapter = wgpu::Adapter::request(&wgpu::RequestAdapterOptions {
-            power_preference: wgpu::PowerPreference::Default,
+            power_preference: if settings.antialiasing.is_none() {
+                wgpu::PowerPreference::Default
+            } else {
+                wgpu::PowerPreference::HighPerformance
+            },
             backends: wgpu::BackendBit::all(),
         })
         .expect("Request adapter");