Merge pull request #354 from hecrj/feature/glow-renderer

OpenGL renderer and backend-agnostic graphics subcrate

48 files changed, 3957 insertions, 0 deletions

diff --git a/graphics/Cargo.toml b/graphics/Cargo.toml
new file mode 100644
index 00000000..8e078d75
--- /dev/null
+++ b/graphics/Cargo.toml
@@ -0,0 +1,37 @@
+[package]
+name = "iced_graphics"
+version = "0.1.0"
+authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
+edition = "2018"
+
+[features]
+canvas = ["lyon"]
+font-source = ["font-kit"]
+font-fallback = []
+font-icons = []
+opengl = []
+
+[dependencies]
+bytemuck = "1.2"
+glam = "0.8"
+raw-window-handle = "0.3"
+
+[dependencies.iced_native]
+version = "0.2"
+path = "../native"
+
+[dependencies.iced_style]
+version = "0.1"
+path = "../style"
+
+[dependencies.lyon]
+version = "0.15"
+optional = true
+
+[dependencies.font-kit]
+version = "0.6"
+optional = true
+
+[package.metadata.docs.rs]
+rustdoc-args = ["--cfg", "docsrs"]
+all-features = true
diff --git a/graphics/fonts/Icons.ttf b/graphics/fonts/Icons.ttf
new file mode 100644
index 00000000..1c832f86
--- /dev/null
+++ b/graphics/fonts/Icons.ttf
diff --git a/graphics/fonts/Lato-Regular.ttf b/graphics/fonts/Lato-Regular.ttf
new file mode 100644
index 00000000..33eba8b1
--- /dev/null
+++ b/graphics/fonts/Lato-Regular.ttf
diff --git a/graphics/fonts/OFL.txt b/graphics/fonts/OFL.txt
new file mode 100644
index 00000000..dfca0da4
--- /dev/null
+++ b/graphics/fonts/OFL.txt
@@ -0,0 +1,93 @@
+Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"

+

+This Font Software is licensed under the SIL Open Font License, Version 1.1.

+This license is copied below, and is also available with a FAQ at:

+http://scripts.sil.org/OFL

+

+

+-----------------------------------------------------------

+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007

+-----------------------------------------------------------

+

+PREAMBLE

+The goals of the Open Font License (OFL) are to stimulate worldwide

+development of collaborative font projects, to support the font creation

+efforts of academic and linguistic communities, and to provide a free and

+open framework in which fonts may be shared and improved in partnership

+with others.

+

+The OFL allows the licensed fonts to be used, studied, modified and

+redistributed freely as long as they are not sold by themselves. The

+fonts, including any derivative works, can be bundled, embedded, 

+redistributed and/or sold with any software provided that any reserved

+names are not used by derivative works. The fonts and derivatives,

+however, cannot be released under any other type of license. The

+requirement for fonts to remain under this license does not apply

+to any document created using the fonts or their derivatives.

+

+DEFINITIONS

+"Font Software" refers to the set of files released by the Copyright

+Holder(s) under this license and clearly marked as such. This may

+include source files, build scripts and documentation.

+

+"Reserved Font Name" refers to any names specified as such after the

+copyright statement(s).

+

+"Original Version" refers to the collection of Font Software components as

+distributed by the Copyright Holder(s).

+

+"Modified Version" refers to any derivative made by adding to, deleting,

+or substituting -- in part or in whole -- any of the components of the

+Original Version, by changing formats or by porting the Font Software to a

+new environment.

+

+"Author" refers to any designer, engineer, programmer, technical

+writer or other person who contributed to the Font Software.

+

+PERMISSION & CONDITIONS

+Permission is hereby granted, free of charge, to any person obtaining

+a copy of the Font Software, to use, study, copy, merge, embed, modify,

+redistribute, and sell modified and unmodified copies of the Font

+Software, subject to the following conditions:

+

+1) Neither the Font Software nor any of its individual components,

+in Original or Modified Versions, may be sold by itself.

+

+2) Original or Modified Versions of the Font Software may be bundled,

+redistributed and/or sold with any software, provided that each copy

+contains the above copyright notice and this license. These can be

+included either as stand-alone text files, human-readable headers or

+in the appropriate machine-readable metadata fields within text or

+binary files as long as those fields can be easily viewed by the user.

+

+3) No Modified Version of the Font Software may use the Reserved Font

+Name(s) unless explicit written permission is granted by the corresponding

+Copyright Holder. This restriction only applies to the primary font name as

+presented to the users.

+

+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font

+Software shall not be used to promote, endorse or advertise any

+Modified Version, except to acknowledge the contribution(s) of the

+Copyright Holder(s) and the Author(s) or with their explicit written

+permission.

+

+5) The Font Software, modified or unmodified, in part or in whole,

+must be distributed entirely under this license, and must not be

+distributed under any other license. The requirement for fonts to

+remain under this license does not apply to any document created

+using the Font Software.

+

+TERMINATION

+This license becomes null and void if any of the above conditions are

+not met.

+

+DISCLAIMER

+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,

+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF

+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT

+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE

+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,

+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL

+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING

+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM

+OTHER DEALINGS IN THE FONT SOFTWARE.

diff --git a/graphics/src/antialiasing.rs b/graphics/src/antialiasing.rs
new file mode 100644
index 00000000..34d94711
--- /dev/null
+++ b/graphics/src/antialiasing.rs
@@ -0,0 +1,26 @@
+/// 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 {
+    /// Returns the amount of samples of the [`Antialiasing`].
+    ///
+    /// [`Antialiasing`]: enum.Antialiasing.html
+    pub fn sample_count(self) -> u32 {
+        match self {
+            Antialiasing::MSAAx2 => 2,
+            Antialiasing::MSAAx4 => 4,
+            Antialiasing::MSAAx8 => 8,
+            Antialiasing::MSAAx16 => 16,
+        }
+    }
+}
diff --git a/graphics/src/backend.rs b/graphics/src/backend.rs
new file mode 100644
index 00000000..83510311
--- /dev/null
+++ b/graphics/src/backend.rs
@@ -0,0 +1,50 @@
+//! Write a graphics backend.
+use iced_native::image;
+use iced_native::svg;
+use iced_native::{Font, Size};
+
+/// The graphics backend of a [`Renderer`].
+///
+/// [`Renderer`]: ../struct.Renderer.html
+pub trait Backend {
+    /// Trims the measurements cache.
+    ///
+    /// This method is currently necessary to properly trim the text cache in
+    /// `iced_wgpu` and `iced_glow` because of limitations in the text rendering
+    /// pipeline. It will be removed in the future.
+    fn trim_measurements(&mut self) {}
+}
+
+/// A graphics backend that supports text rendering.
+pub trait Text {
+    /// The icon font of the backend.
+    const ICON_FONT: Font;
+
+    /// The `char` representing a ✔ icon in the [`ICON_FONT`].
+    ///
+    /// [`ICON_FONT`]: #associatedconst.ICON_FONt
+    const CHECKMARK_ICON: char;
+
+    /// Measures the text contents with the given size and font,
+    /// returning the size of a laid out paragraph that fits in the provided
+    /// bounds.
+    fn measure(
+        &self,
+        contents: &str,
+        size: f32,
+        font: Font,
+        bounds: Size,
+    ) -> (f32, f32);
+}
+
+/// A graphics backend that supports image rendering.
+pub trait Image {
+    /// Returns the dimensions of the provided image.
+    fn dimensions(&self, handle: &image::Handle) -> (u32, u32);
+}
+
+/// A graphics backend that supports SVG rendering.
+pub trait Svg {
+    /// Returns the viewport dimensions of the provided SVG.
+    fn viewport_dimensions(&self, handle: &svg::Handle) -> (u32, u32);
+}
diff --git a/graphics/src/defaults.rs b/graphics/src/defaults.rs
new file mode 100644
index 00000000..11718a87
--- /dev/null
+++ b/graphics/src/defaults.rs
@@ -0,0 +1,32 @@
+//! Use default styling attributes to inherit styles.
+use iced_native::Color;
+
+/// Some default styling attributes.
+#[derive(Debug, Clone, Copy)]
+pub struct Defaults {
+    /// Text styling
+    pub text: Text,
+}
+
+impl Default for Defaults {
+    fn default() -> Defaults {
+        Defaults {
+            text: Text::default(),
+        }
+    }
+}
+
+/// Some default text styling attributes.
+#[derive(Debug, Clone, Copy)]
+pub struct Text {
+    /// The default color of text
+    pub color: Color,
+}
+
+impl Default for Text {
+    fn default() -> Text {
+        Text {
+            color: Color::BLACK,
+        }
+    }
+}
diff --git a/graphics/src/font.rs b/graphics/src/font.rs
new file mode 100644
index 00000000..bcc28857
--- /dev/null
+++ b/graphics/src/font.rs
@@ -0,0 +1,33 @@
+//! Find system fonts or use the built-in ones.
+#[cfg(feature = "font-source")]
+mod source;
+
+#[cfg(feature = "font-source")]
+#[cfg_attr(docsrs, doc(cfg(feature = "font-source")))]
+pub use source::Source;
+
+#[cfg(feature = "font-source")]
+#[cfg_attr(docsrs, doc(cfg(feature = "font-source")))]
+pub use font_kit::{
+    error::SelectionError as LoadError, family_name::FamilyName as Family,
+};
+
+/// A built-in fallback font, for convenience.
+#[cfg(feature = "font-fallback")]
+#[cfg_attr(docsrs, doc(cfg(feature = "font-fallback")))]
+pub const FALLBACK: &[u8] = include_bytes!("../fonts/Lato-Regular.ttf");
+
+/// A built-in icon font, for convenience.
+#[cfg(feature = "font-icons")]
+#[cfg_attr(docsrs, doc(cfg(feature = "font-icons")))]
+pub const ICONS: iced_native::Font = iced_native::Font::External {
+    name: "iced_wgpu icons",
+    bytes: include_bytes!("../fonts/Icons.ttf"),
+};
+
+/// The `char` representing a ✔ icon in the built-in [`ICONS`] font.
+///
+/// [`ICONS`]: const.ICONS.html
+#[cfg(feature = "font-icons")]
+#[cfg_attr(docsrs, doc(cfg(feature = "font-icons")))]
+pub const CHECKMARK_ICON: char = '\u{F00C}';
diff --git a/graphics/src/font/source.rs b/graphics/src/font/source.rs
new file mode 100644
index 00000000..917291ff
--- /dev/null
+++ b/graphics/src/font/source.rs
@@ -0,0 +1,43 @@
+use crate::font::{Family, LoadError};
+
+/// A font source that can find and load system fonts.
+#[allow(missing_debug_implementations)]
+pub struct Source {
+    raw: font_kit::source::SystemSource,
+}
+
+impl Source {
+    /// Creates a new [`Source`].
+    ///
+    /// [`Source`]: struct.Source.html
+    pub fn new() -> Self {
+        Source {
+            raw: font_kit::source::SystemSource::new(),
+        }
+    }
+
+    /// Finds and loads a font matching the set of provided family priorities.
+    ///
+    /// [`Source`]: struct.Source.html
+    pub fn load(&self, families: &[Family]) -> Result<Vec<u8>, LoadError> {
+        let font = self.raw.select_best_match(
+            families,
+            &font_kit::properties::Properties::default(),
+        )?;
+
+        match font {
+            font_kit::handle::Handle::Path { path, .. } => {
+                use std::io::Read;
+
+                let mut buf = Vec::new();
+                let mut reader = std::fs::File::open(path).expect("Read font");
+                let _ = reader.read_to_end(&mut buf);
+
+                Ok(buf)
+            }
+            font_kit::handle::Handle::Memory { bytes, .. } => {
+                Ok(bytes.as_ref().clone())
+            }
+        }
+    }
+}
diff --git a/graphics/src/layer.rs b/graphics/src/layer.rs
new file mode 100644
index 00000000..6aca738e
--- /dev/null
+++ b/graphics/src/layer.rs
@@ -0,0 +1,359 @@
+//! Organize rendering primitives into a flattened list of layers.
+use crate::image;
+use crate::svg;
+use crate::triangle;
+use crate::{
+    Background, Font, HorizontalAlignment, Point, Primitive, Rectangle, Size,
+    Vector, VerticalAlignment, Viewport,
+};
+
+/// A group of primitives that should be clipped together.
+#[derive(Debug, Clone)]
+pub struct Layer<'a> {
+    /// The clipping bounds of the [`Layer`].
+    ///
+    /// [`Layer`]: struct.Layer.html
+    pub bounds: Rectangle,
+
+    /// The quads of the [`Layer`].
+    ///
+    /// [`Layer`]: struct.Layer.html
+    pub quads: Vec<Quad>,
+
+    /// The triangle meshes of the [`Layer`].
+    ///
+    /// [`Layer`]: struct.Layer.html
+    pub meshes: Vec<Mesh<'a>>,
+
+    /// The text of the [`Layer`].
+    ///
+    /// [`Layer`]: struct.Layer.html
+    pub text: Vec<Text<'a>>,
+
+    /// The images of the [`Layer`].
+    ///
+    /// [`Layer`]: struct.Layer.html
+    pub images: Vec<Image>,
+}
+
+impl<'a> Layer<'a> {
+    /// Creates a new [`Layer`] with the given clipping bounds.
+    ///
+    /// [`Layer`]: struct.Layer.html
+    pub fn new(bounds: Rectangle) -> Self {
+        Self {
+            bounds,
+            quads: Vec::new(),
+            meshes: Vec::new(),
+            text: Vec::new(),
+            images: Vec::new(),
+        }
+    }
+
+    /// Creates a new [`Layer`] for the provided overlay text.
+    ///
+    /// This can be useful for displaying debug information.
+    ///
+    /// [`Layer`]: struct.Layer.html
+    pub fn overlay(lines: &'a [impl AsRef<str>], viewport: &Viewport) -> Self {
+        let mut overlay =
+            Layer::new(Rectangle::with_size(viewport.logical_size()));
+
+        for (i, line) in lines.iter().enumerate() {
+            let text = Text {
+                content: line.as_ref(),
+                bounds: Rectangle::new(
+                    Point::new(11.0, 11.0 + 25.0 * i as f32),
+                    Size::INFINITY,
+                ),
+                color: [0.9, 0.9, 0.9, 1.0],
+                size: 20.0,
+                font: Font::Default,
+                horizontal_alignment: HorizontalAlignment::Left,
+                vertical_alignment: VerticalAlignment::Top,
+            };
+
+            overlay.text.push(text);
+
+            overlay.text.push(Text {
+                bounds: text.bounds + Vector::new(-1.0, -1.0),
+                color: [0.0, 0.0, 0.0, 1.0],
+                ..text
+            });
+        }
+
+        overlay
+    }
+
+    /// Distributes the given [`Primitive`] and generates a list of layers based
+    /// on its contents.
+    ///
+    /// [`Primitive`]: ../enum.Primitive.html
+    pub fn generate(
+        primitive: &'a Primitive,
+        viewport: &Viewport,
+    ) -> Vec<Self> {
+        let first_layer =
+            Layer::new(Rectangle::with_size(viewport.logical_size()));
+
+        let mut layers = vec![first_layer];
+
+        Self::process_primitive(&mut layers, Vector::new(0.0, 0.0), primitive);
+
+        layers
+    }
+
+    fn process_primitive(
+        layers: &mut Vec<Self>,
+        translation: Vector,
+        primitive: &'a Primitive,
+    ) {
+        match primitive {
+            Primitive::None => {}
+            Primitive::Group { primitives } => {
+                // TODO: Inspect a bit and regroup (?)
+                for primitive in primitives {
+                    Self::process_primitive(layers, translation, primitive)
+                }
+            }
+            Primitive::Text {
+                content,
+                bounds,
+                size,
+                color,
+                font,
+                horizontal_alignment,
+                vertical_alignment,
+            } => {
+                let layer = layers.last_mut().unwrap();
+
+                layer.text.push(Text {
+                    content,
+                    bounds: *bounds + translation,
+                    size: *size,
+                    color: color.into_linear(),
+                    font: *font,
+                    horizontal_alignment: *horizontal_alignment,
+                    vertical_alignment: *vertical_alignment,
+                });
+            }
+            Primitive::Quad {
+                bounds,
+                background,
+                border_radius,
+                border_width,
+                border_color,
+            } => {
+                let layer = layers.last_mut().unwrap();
+
+                // TODO: Move some of these computations to the GPU (?)
+                layer.quads.push(Quad {
+                    position: [
+                        bounds.x + translation.x,
+                        bounds.y + translation.y,
+                    ],
+                    size: [bounds.width, bounds.height],
+                    color: match background {
+                        Background::Color(color) => color.into_linear(),
+                    },
+                    border_radius: *border_radius as f32,
+                    border_width: *border_width as f32,
+                    border_color: border_color.into_linear(),
+                });
+            }
+            Primitive::Mesh2D { buffers, size } => {
+                let layer = layers.last_mut().unwrap();
+
+                let bounds = Rectangle::new(
+                    Point::new(translation.x, translation.y),
+                    *size,
+                );
+
+                // Only draw visible content
+                if let Some(clip_bounds) = layer.bounds.intersection(&bounds) {
+                    layer.meshes.push(Mesh {
+                        origin: Point::new(translation.x, translation.y),
+                        buffers,
+                        clip_bounds,
+                    });
+                }
+            }
+            Primitive::Clip {
+                bounds,
+                offset,
+                content,
+            } => {
+                let layer = layers.last_mut().unwrap();
+                let translated_bounds = *bounds + translation;
+
+                // Only draw visible content
+                if let Some(clip_bounds) =
+                    layer.bounds.intersection(&translated_bounds)
+                {
+                    let clip_layer = Layer::new(clip_bounds);
+                    let new_layer = Layer::new(layer.bounds);
+
+                    layers.push(clip_layer);
+                    Self::process_primitive(
+                        layers,
+                        translation
+                            - Vector::new(offset.x as f32, offset.y as f32),
+                        content,
+                    );
+                    layers.push(new_layer);
+                }
+            }
+            Primitive::Translate {
+                translation: new_translation,
+                content,
+            } => {
+                Self::process_primitive(
+                    layers,
+                    translation + *new_translation,
+                    &content,
+                );
+            }
+            Primitive::Cached { cache } => {
+                Self::process_primitive(layers, translation, &cache);
+            }
+            Primitive::Image { handle, bounds } => {
+                let layer = layers.last_mut().unwrap();
+
+                layer.images.push(Image::Raster {
+                    handle: handle.clone(),
+                    bounds: *bounds + translation,
+                });
+            }
+            Primitive::Svg { handle, bounds } => {
+                let layer = layers.last_mut().unwrap();
+
+                layer.images.push(Image::Vector {
+                    handle: handle.clone(),
+                    bounds: *bounds + translation,
+                });
+            }
+        }
+    }
+}
+
+/// A colored rectangle with a border.
+///
+/// This type can be directly uploaded to GPU memory.
+#[derive(Debug, Clone, Copy)]
+#[repr(C)]
+pub struct Quad {
+    /// The position of the [`Quad`].
+    ///
+    /// [`Quad`]: struct.Quad.html
+    pub position: [f32; 2],
+
+    /// The size of the [`Quad`].
+    ///
+    /// [`Quad`]: struct.Quad.html
+    pub size: [f32; 2],
+
+    /// The color of the [`Quad`], in __linear RGB__.
+    ///
+    /// [`Quad`]: struct.Quad.html
+    pub color: [f32; 4],
+
+    /// The border color of the [`Quad`], in __linear RGB__.
+    ///
+    /// [`Quad`]: struct.Quad.html
+    pub border_color: [f32; 4],
+
+    /// The border radius of the [`Quad`].
+    ///
+    /// [`Quad`]: struct.Quad.html
+    pub border_radius: f32,
+
+    /// The border width of the [`Quad`].
+    ///
+    /// [`Quad`]: struct.Quad.html
+    pub border_width: f32,
+}
+
+/// A mesh of triangles.
+#[derive(Debug, Clone, Copy)]
+pub struct Mesh<'a> {
+    /// The origin of the vertices of the [`Mesh`].
+    ///
+    /// [`Mesh`]: struct.Mesh.html
+    pub origin: Point,
+
+    /// The vertex and index buffers of the [`Mesh`].
+    ///
+    /// [`Mesh`]: struct.Mesh.html
+    pub buffers: &'a triangle::Mesh2D,
+
+    /// The clipping bounds of the [`Mesh`].
+    ///
+    /// [`Mesh`]: struct.Mesh.html
+    pub clip_bounds: Rectangle<f32>,
+}
+
+/// A paragraph of text.
+#[derive(Debug, Clone, Copy)]
+pub struct Text<'a> {
+    /// The content of the [`Text`].
+    ///
+    /// [`Text`]: struct.Text.html
+    pub content: &'a str,
+
+    /// The layout bounds of the [`Text`].
+    ///
+    /// [`Text`]: struct.Text.html
+    pub bounds: Rectangle,
+
+    /// The color of the [`Text`], in __linear RGB_.
+    ///
+    /// [`Text`]: struct.Text.html
+    pub color: [f32; 4],
+
+    /// The size of the [`Text`].
+    ///
+    /// [`Text`]: struct.Text.html
+    pub size: f32,
+
+    /// The font of the [`Text`].
+    ///
+    /// [`Text`]: struct.Text.html
+    pub font: Font,
+
+    /// The horizontal alignment of the [`Text`].
+    ///
+    /// [`Text`]: struct.Text.html
+    pub horizontal_alignment: HorizontalAlignment,
+
+    /// The vertical alignment of the [`Text`].
+    ///
+    /// [`Text`]: struct.Text.html
+    pub vertical_alignment: VerticalAlignment,
+}
+
+/// A raster or vector image.
+#[derive(Debug, Clone)]
+pub enum Image {
+    /// A raster image.
+    Raster {
+        /// The handle of a raster image.
+        handle: image::Handle,
+
+        /// The bounds of the image.
+        bounds: Rectangle,
+    },
+    /// A vector image.
+    Vector {
+        /// The handle of a vector image.
+        handle: svg::Handle,
+
+        /// The bounds of the image.
+        bounds: Rectangle,
+    },
+}
+
+#[allow(unsafe_code)]
+unsafe impl bytemuck::Zeroable for Quad {}
+
+#[allow(unsafe_code)]
+unsafe impl bytemuck::Pod for Quad {}
diff --git a/graphics/src/lib.rs b/graphics/src/lib.rs
new file mode 100644
index 00000000..b6dda132
--- /dev/null
+++ b/graphics/src/lib.rs
@@ -0,0 +1,40 @@
+//! A bunch of backend-agnostic types that can be leveraged to build a renderer
+//! for [`iced`].
+//!
+//! [`iced`]: https://github.com/hecrj/iced
+#![deny(missing_docs)]
+#![deny(missing_debug_implementations)]
+#![deny(unused_results)]
+#![deny(unsafe_code)]
+#![forbid(rust_2018_idioms)]
+#![cfg_attr(docsrs, feature(doc_cfg))]
+mod antialiasing;
+mod defaults;
+mod primitive;
+mod renderer;
+mod transformation;
+mod viewport;
+mod widget;
+
+pub mod backend;
+pub mod font;
+pub mod layer;
+pub mod triangle;
+pub mod window;
+
+#[doc(no_inline)]
+pub use widget::*;
+
+pub use antialiasing::Antialiasing;
+pub use backend::Backend;
+pub use defaults::Defaults;
+pub use layer::Layer;
+pub use primitive::Primitive;
+pub use renderer::Renderer;
+pub use transformation::Transformation;
+pub use viewport::Viewport;
+
+pub use iced_native::{
+    Background, Font, HorizontalAlignment, Point, Rectangle, Size, Vector,
+    VerticalAlignment,
+};
diff --git a/graphics/src/primitive.rs b/graphics/src/primitive.rs
new file mode 100644
index 00000000..95dbf7dd
--- /dev/null
+++ b/graphics/src/primitive.rs
@@ -0,0 +1,107 @@
+use iced_native::{
+    image, svg, Background, Color, Font, HorizontalAlignment, Rectangle, Size,
+    Vector, VerticalAlignment,
+};
+
+use crate::triangle;
+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
+        content: String,
+        /// The bounds of the text
+        bounds: Rectangle,
+        /// The color of the text
+        color: Color,
+        /// The size of the text
+        size: f32,
+        /// The font of the text
+        font: Font,
+        /// The horizontal alignment of the text
+        horizontal_alignment: HorizontalAlignment,
+        /// The vertical alignment of the text
+        vertical_alignment: VerticalAlignment,
+    },
+    /// A quad primitive
+    Quad {
+        /// The bounds of the quad
+        bounds: Rectangle,
+        /// The background of the quad
+        background: Background,
+        /// The border radius of the quad
+        border_radius: u16,
+        /// The border width of the quad
+        border_width: u16,
+        /// The border color of the quad
+        border_color: Color,
+    },
+    /// An image primitive
+    Image {
+        /// The handle of the image
+        handle: image::Handle,
+        /// The bounds of the image
+        bounds: Rectangle,
+    },
+    /// An SVG primitive
+    Svg {
+        /// The path of the SVG file
+        handle: svg::Handle,
+
+        /// The bounds of the viewport
+        bounds: Rectangle,
+    },
+    /// A clip primitive
+    Clip {
+        /// The bounds of the clip
+        bounds: Rectangle,
+        /// The offset transformation of the clip
+        offset: Vector<u32>,
+        /// 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.
+    ///
+    /// It can be used to render many kinds of geometry freely.
+    Mesh2D {
+        /// The vertex and index buffers of the mesh
+        buffers: triangle::Mesh2D,
+
+        /// The size of the drawable region of the mesh.
+        ///
+        /// Any geometry that falls out of this region will be clipped.
+        size: Size,
+    },
+    /// 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>,
+    },
+}
+
+impl Default for Primitive {
+    fn default() -> Primitive {
+        Primitive::None
+    }
+}
diff --git a/graphics/src/renderer.rs b/graphics/src/renderer.rs
new file mode 100644
index 00000000..c9360f3a
--- /dev/null
+++ b/graphics/src/renderer.rs
@@ -0,0 +1,98 @@
+use crate::{Backend, Defaults, Primitive};
+use iced_native::layout::{self, Layout};
+use iced_native::mouse;
+use iced_native::{Background, Color, Element, Point, Widget};
+
+/// A backend-agnostic renderer that supports all the built-in widgets.
+#[derive(Debug)]
+pub struct Renderer<B: Backend> {
+    backend: B,
+}
+
+impl<B: Backend> Renderer<B> {
+    /// Creates a new [`Renderer`] from the given [`Backend`].
+    ///
+    /// [`Renderer`]: struct.Renderer.html
+    /// [`Backend`]: backend/trait.Backend.html
+    pub fn new(backend: B) -> Self {
+        Self { backend }
+    }
+
+    /// Returns a reference to the [`Backend`] of the [`Renderer`].
+    ///
+    /// [`Renderer`]: struct.Renderer.html
+    /// [`Backend`]: backend/trait.Backend.html
+    pub fn backend(&self) -> &B {
+        &self.backend
+    }
+
+    /// Returns a mutable reference to the [`Backend`] of the [`Renderer`].
+    ///
+    /// [`Renderer`]: struct.Renderer.html
+    /// [`Backend`]: backend/trait.Backend.html
+    pub fn backend_mut(&mut self) -> &mut B {
+        &mut self.backend
+    }
+}
+
+impl<B> iced_native::Renderer for Renderer<B>
+where
+    B: Backend,
+{
+    type Output = (Primitive, mouse::Interaction);
+    type Defaults = Defaults;
+
+    fn layout<'a, Message>(
+        &mut self,
+        element: &Element<'a, Message, Self>,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        let layout = element.layout(self, limits);
+
+        self.backend.trim_measurements();
+
+        layout
+    }
+}
+
+impl<B> layout::Debugger for Renderer<B>
+where
+    B: Backend,
+{
+    fn explain<Message>(
+        &mut self,
+        defaults: &Defaults,
+        widget: &dyn Widget<Message, Self>,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        color: Color,
+    ) -> Self::Output {
+        let (primitive, cursor) =
+            widget.draw(self, defaults, layout, cursor_position);
+
+        let mut primitives = Vec::new();
+
+        explain_layout(layout, color, &mut primitives);
+        primitives.push(primitive);
+
+        (Primitive::Group { primitives }, cursor)
+    }
+}
+
+fn explain_layout(
+    layout: Layout<'_>,
+    color: Color,
+    primitives: &mut Vec<Primitive>,
+) {
+    primitives.push(Primitive::Quad {
+        bounds: layout.bounds(),
+        background: Background::Color(Color::TRANSPARENT),
+        border_radius: 0,
+        border_width: 1,
+        border_color: [0.6, 0.6, 0.6, 0.5].into(),
+    });
+
+    for child in layout.children() {
+        explain_layout(child, color, primitives);
+    }
+}
diff --git a/graphics/src/transformation.rs b/graphics/src/transformation.rs
new file mode 100644
index 00000000..ff3b1d00
--- /dev/null
+++ b/graphics/src/transformation.rs
@@ -0,0 +1,54 @@
+use glam::{Mat4, Vec3, Vec4};
+use std::ops::Mul;
+
+/// A 2D transformation matrix.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub struct Transformation(Mat4);
+
+impl Transformation {
+    /// Get the identity transformation.
+    pub fn identity() -> Transformation {
+        Transformation(Mat4::identity())
+    }
+
+    /// Creates an orthographic projection.
+    #[rustfmt::skip]
+    pub fn orthographic(width: u32, height: u32) -> Transformation {
+        Transformation(Mat4::from_cols(
+            Vec4::new(2.0 / width as f32, 0.0, 0.0, 0.0),
+            Vec4::new(0.0, -2.0 / height as f32, 0.0, 0.0),
+            Vec4::new(0.0, 0.0, -1.0, 0.0),
+            Vec4::new(-1.0, 1.0, 0.0, 1.0)
+        ))
+    }
+
+    /// Creates a translate transformation.
+    pub fn translate(x: f32, y: f32) -> Transformation {
+        Transformation(Mat4::from_translation(Vec3::new(x, y, 0.0)))
+    }
+
+    /// Creates a scale transformation.
+    pub fn scale(x: f32, y: f32) -> Transformation {
+        Transformation(Mat4::from_scale(Vec3::new(x, y, 1.0)))
+    }
+}
+
+impl Mul for Transformation {
+    type Output = Self;
+
+    fn mul(self, rhs: Self) -> Self {
+        Transformation(self.0 * rhs.0)
+    }
+}
+
+impl AsRef<[f32; 16]> for Transformation {
+    fn as_ref(&self) -> &[f32; 16] {
+        self.0.as_ref()
+    }
+}
+
+impl From<Transformation> for [f32; 16] {
+    fn from(t: Transformation) -> [f32; 16] {
+        *t.as_ref()
+    }
+}
diff --git a/graphics/src/triangle.rs b/graphics/src/triangle.rs
new file mode 100644
index 00000000..ce879ffc
--- /dev/null
+++ b/graphics/src/triangle.rs
@@ -0,0 +1,32 @@
+//! Draw geometry using meshes of triangles.
+
+/// A set of [`Vertex2D`] and indices representing a list of triangles.
+///
+/// [`Vertex2D`]: struct.Vertex2D.html
+#[derive(Clone, Debug)]
+pub struct Mesh2D {
+    /// The vertices of the mesh
+    pub vertices: Vec<Vertex2D>,
+
+    /// 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 with some color in __linear__ RGBA.
+#[derive(Copy, Clone, Debug)]
+#[repr(C)]
+pub struct Vertex2D {
+    /// The vertex position
+    pub position: [f32; 2],
+    /// The vertex color in __linear__ RGBA.
+    pub color: [f32; 4],
+}
+
+#[allow(unsafe_code)]
+unsafe impl bytemuck::Zeroable for Vertex2D {}
+
+#[allow(unsafe_code)]
+unsafe impl bytemuck::Pod for Vertex2D {}
diff --git a/graphics/src/viewport.rs b/graphics/src/viewport.rs
new file mode 100644
index 00000000..66122e6d
--- /dev/null
+++ b/graphics/src/viewport.rs
@@ -0,0 +1,70 @@
+use crate::{Size, Transformation};
+
+/// A viewing region for displaying computer graphics.
+#[derive(Debug)]
+pub struct Viewport {
+    physical_size: Size<u32>,
+    logical_size: Size<f32>,
+    scale_factor: f64,
+    projection: Transformation,
+}
+
+impl Viewport {
+    /// Creates a new [`Viewport`] with the given physical dimensions and scale
+    /// factor.
+    ///
+    /// [`Viewport`]: struct.Viewport.html
+    pub fn with_physical_size(size: Size<u32>, scale_factor: f64) -> Viewport {
+        Viewport {
+            physical_size: size,
+            logical_size: Size::new(
+                (size.width as f64 / scale_factor) as f32,
+                (size.height as f64 / scale_factor) as f32,
+            ),
+            scale_factor,
+            projection: Transformation::orthographic(size.width, size.height),
+        }
+    }
+
+    /// Returns the physical size of the [`Viewport`].
+    ///
+    /// [`Viewport`]: struct.Viewport.html
+    pub fn physical_size(&self) -> Size<u32> {
+        self.physical_size
+    }
+
+    /// Returns the physical width of the [`Viewport`].
+    ///
+    /// [`Viewport`]: struct.Viewport.html
+    pub fn physical_width(&self) -> u32 {
+        self.physical_size.height
+    }
+
+    /// Returns the physical height of the [`Viewport`].
+    ///
+    /// [`Viewport`]: struct.Viewport.html
+    pub fn physical_height(&self) -> u32 {
+        self.physical_size.height
+    }
+
+    /// Returns the logical size of the [`Viewport`].
+    ///
+    /// [`Viewport`]: struct.Viewport.html
+    pub fn logical_size(&self) -> Size<f32> {
+        self.logical_size
+    }
+
+    /// Returns the scale factor of the [`Viewport`].
+    ///
+    /// [`Viewport`]: struct.Viewport.html
+    pub fn scale_factor(&self) -> f64 {
+        self.scale_factor
+    }
+
+    /// Returns the projection transformation of the [`Viewport`].
+    ///
+    /// [`Viewport`]: struct.Viewport.html
+    pub fn projection(&self) -> Transformation {
+        self.projection
+    }
+}
diff --git a/graphics/src/widget.rs b/graphics/src/widget.rs
new file mode 100644
index 00000000..1f6d6559
--- /dev/null
+++ b/graphics/src/widget.rs
@@ -0,0 +1,59 @@
+//! Use the widgets supported out-of-the-box.
+//!
+//! # Re-exports
+//! For convenience, the contents of this module are available at the root
+//! module. Therefore, you can directly type:
+//!
+//! ```
+//! use iced_graphics::{button, Button};
+//! ```
+pub mod button;
+pub mod checkbox;
+pub mod container;
+pub mod image;
+pub mod pane_grid;
+pub mod progress_bar;
+pub mod radio;
+pub mod scrollable;
+pub mod slider;
+pub mod svg;
+pub mod text_input;
+
+mod column;
+mod row;
+mod space;
+mod text;
+
+#[doc(no_inline)]
+pub use button::Button;
+#[doc(no_inline)]
+pub use checkbox::Checkbox;
+#[doc(no_inline)]
+pub use container::Container;
+#[doc(no_inline)]
+pub use pane_grid::PaneGrid;
+#[doc(no_inline)]
+pub use progress_bar::ProgressBar;
+#[doc(no_inline)]
+pub use radio::Radio;
+#[doc(no_inline)]
+pub use scrollable::Scrollable;
+#[doc(no_inline)]
+pub use slider::Slider;
+#[doc(no_inline)]
+pub use text_input::TextInput;
+
+pub use column::Column;
+pub use image::Image;
+pub use row::Row;
+pub use space::Space;
+pub use svg::Svg;
+pub use text::Text;
+
+#[cfg(feature = "canvas")]
+#[cfg_attr(docsrs, doc(cfg(feature = "canvas")))]
+pub mod canvas;
+
+#[cfg(feature = "canvas")]
+#[doc(no_inline)]
+pub use canvas::Canvas;
diff --git a/graphics/src/widget/button.rs b/graphics/src/widget/button.rs
new file mode 100644
index 00000000..aeb862d5
--- /dev/null
+++ b/graphics/src/widget/button.rs
@@ -0,0 +1,113 @@
+//! Allow your users to perform actions by pressing a button.
+//!
+//! A [`Button`] has some local [`State`].
+//!
+//! [`Button`]: type.Button.html
+//! [`State`]: struct.State.html
+use crate::defaults::{self, Defaults};
+use crate::{Backend, Primitive, Renderer};
+use iced_native::mouse;
+use iced_native::{
+    Background, Color, Element, Layout, Point, Rectangle, Vector,
+};
+
+pub use iced_native::button::State;
+pub use iced_style::button::{Style, StyleSheet};
+
+/// A widget that produces a message when clicked.
+///
+/// This is an alias of an `iced_native` button with an `iced_wgpu::Renderer`.
+pub type Button<'a, Message, Backend> =
+    iced_native::Button<'a, Message, Renderer<Backend>>;
+
+impl<B> iced_native::button::Renderer for Renderer<B>
+where
+    B: Backend,
+{
+    const DEFAULT_PADDING: u16 = 5;
+
+    type Style = Box<dyn StyleSheet>;
+
+    fn draw<Message>(
+        &mut self,
+        _defaults: &Defaults,
+        bounds: Rectangle,
+        cursor_position: Point,
+        is_disabled: bool,
+        is_pressed: bool,
+        style: &Box<dyn StyleSheet>,
+        content: &Element<'_, Message, Self>,
+        content_layout: Layout<'_>,
+    ) -> Self::Output {
+        let is_mouse_over = bounds.contains(cursor_position);
+
+        let styling = if is_disabled {
+            style.disabled()
+        } else if is_mouse_over {
+            if is_pressed {
+                style.pressed()
+            } else {
+                style.hovered()
+            }
+        } else {
+            style.active()
+        };
+
+        let (content, _) = content.draw(
+            self,
+            &Defaults {
+                text: defaults::Text {
+                    color: styling.text_color,
+                },
+            },
+            content_layout,
+            cursor_position,
+        );
+
+        (
+            if styling.background.is_some() || styling.border_width > 0 {
+                let background = Primitive::Quad {
+                    bounds,
+                    background: styling
+                        .background
+                        .unwrap_or(Background::Color(Color::TRANSPARENT)),
+                    border_radius: styling.border_radius,
+                    border_width: styling.border_width,
+                    border_color: styling.border_color,
+                };
+
+                if styling.shadow_offset == Vector::default() {
+                    Primitive::Group {
+                        primitives: vec![background, content],
+                    }
+                } else {
+                    // TODO: Implement proper shadow support
+                    let shadow = Primitive::Quad {
+                        bounds: Rectangle {
+                            x: bounds.x + styling.shadow_offset.x,
+                            y: bounds.y + styling.shadow_offset.y,
+                            ..bounds
+                        },
+                        background: Background::Color(
+                            [0.0, 0.0, 0.0, 0.5].into(),
+                        ),
+                        border_radius: styling.border_radius,
+                        border_width: 0,
+                        border_color: Color::TRANSPARENT,
+                    };
+
+                    Primitive::Group {
+                        primitives: vec![shadow, background, content],
+                    }
+                }
+            } else {
+                content
+            },
+            if is_mouse_over {
+                mouse::Interaction::Pointer
+            } else {
+                mouse::Interaction::default()
+            },
+        )
+    }
+}
diff --git a/graphics/src/widget/canvas.rs b/graphics/src/widget/canvas.rs
new file mode 100644
index 00000000..d393a5c5
--- /dev/null
+++ b/graphics/src/widget/canvas.rs
@@ -0,0 +1,236 @@
+//! 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::{Backend, Defaults, Primitive, Renderer};
+use iced_native::{
+    layout, mouse, Clipboard, Element, Hasher, Layout, Length, Point, Size,
+    Vector, Widget,
+};
+use std::hash::Hash;
+use std::marker::PhantomData;
+
+pub mod path;
+
+mod cache;
+mod cursor;
+mod event;
+mod fill;
+mod frame;
+mod geometry;
+mod program;
+mod stroke;
+mod text;
+
+pub use cache::Cache;
+pub use cursor::Cursor;
+pub use event::Event;
+pub use fill::Fill;
+pub use frame::Frame;
+pub use geometry::Geometry;
+pub use path::Path;
+pub use program::Program;
+pub use stroke::{LineCap, LineJoin, Stroke};
+pub use text::Text;
+
+/// A widget capable of drawing 2D graphics.
+///
+/// [`Canvas`]: struct.Canvas.html
+///
+/// # Examples
+/// The repository has a couple of [examples] showcasing how to use a
+/// [`Canvas`]:
+///
+/// - [`clock`], an application that uses the [`Canvas`] widget to draw a clock
+/// and its hands to display the current time.
+/// - [`game_of_life`], an interactive version of the Game of Life, invented by
+/// John Conway.
+/// - [`solar_system`], an animated solar system drawn using the [`Canvas`] widget
+/// and showcasing how to compose different transforms.
+///
+/// [examples]: https://github.com/hecrj/iced/tree/master/examples
+/// [`clock`]: https://github.com/hecrj/iced/tree/master/examples/clock
+/// [`game_of_life`]: https://github.com/hecrj/iced/tree/master/examples/game_of_life
+/// [`solar_system`]: https://github.com/hecrj/iced/tree/master/examples/solar_system
+///
+/// ## Drawing a simple circle
+/// If you want to get a quick overview, here's how we can draw a simple circle:
+///
+/// ```no_run
+/// # mod iced {
+/// #     pub use iced_graphics::canvas;
+/// #     pub use iced_native::{Color, Rectangle};
+/// # }
+/// use iced::canvas::{self, Canvas, Cursor, Fill, Frame, Geometry, Path, Program};
+/// use iced::{Color, Rectangle};
+///
+/// // First, we define the data we need for drawing
+/// #[derive(Debug)]
+/// struct Circle {
+///     radius: f32,
+/// }
+///
+/// // Then, we implement the `Program` trait
+/// impl Program<()> for Circle {
+///     fn draw(&self, bounds: Rectangle, _cursor: Cursor) -> Vec<Geometry>{
+///         // We prepare a new `Frame`
+///         let mut frame = Frame::new(bounds.size());
+///
+///         // We create a `Path` representing a simple circle
+///         let circle = Path::circle(frame.center(), self.radius);
+///
+///         // And fill it with some color
+///         frame.fill(&circle, Fill::Color(Color::BLACK));
+///
+///         // Finally, we produce the geometry
+///         vec![frame.into_geometry()]
+///     }
+/// }
+///
+/// // Finally, we simply use our `Circle` to create the `Canvas`!
+/// let canvas = Canvas::new(Circle { radius: 50.0 });
+/// ```
+#[derive(Debug)]
+pub struct Canvas<Message, P: Program<Message>> {
+    width: Length,
+    height: Length,
+    program: P,
+    phantom: PhantomData<Message>,
+}
+
+impl<Message, P: Program<Message>> Canvas<Message, P> {
+    const DEFAULT_SIZE: u16 = 100;
+
+    /// Creates a new [`Canvas`].
+    ///
+    /// [`Canvas`]: struct.Canvas.html
+    pub fn new(program: P) -> Self {
+        Canvas {
+            width: Length::Units(Self::DEFAULT_SIZE),
+            height: Length::Units(Self::DEFAULT_SIZE),
+            program,
+            phantom: PhantomData,
+        }
+    }
+
+    /// 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
+    }
+}
+
+impl<Message, P, B> Widget<Message, Renderer<B>> for Canvas<Message, P>
+where
+    P: Program<Message>,
+    B: Backend,
+{
+    fn width(&self) -> Length {
+        self.width
+    }
+
+    fn height(&self) -> Length {
+        self.height
+    }
+
+    fn layout(
+        &self,
+        _renderer: &Renderer<B>,
+        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 on_event(
+        &mut self,
+        event: iced_native::Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        messages: &mut Vec<Message>,
+        _renderer: &Renderer<B>,
+        _clipboard: Option<&dyn Clipboard>,
+    ) {
+        let bounds = layout.bounds();
+
+        let canvas_event = match event {
+            iced_native::Event::Mouse(mouse_event) => {
+                Some(Event::Mouse(mouse_event))
+            }
+            _ => None,
+        };
+
+        let cursor = Cursor::from_window_position(cursor_position);
+
+        if let Some(canvas_event) = canvas_event {
+            if let Some(message) =
+                self.program.update(canvas_event, bounds, cursor)
+            {
+                messages.push(message);
+            }
+        }
+    }
+
+    fn draw(
+        &self,
+        _renderer: &mut Renderer<B>,
+        _defaults: &Defaults,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> (Primitive, mouse::Interaction) {
+        let bounds = layout.bounds();
+        let translation = Vector::new(bounds.x, bounds.y);
+        let cursor = Cursor::from_window_position(cursor_position);
+
+        (
+            Primitive::Translate {
+                translation,
+                content: Box::new(Primitive::Group {
+                    primitives: self
+                        .program
+                        .draw(bounds, cursor)
+                        .into_iter()
+                        .map(Geometry::into_primitive)
+                        .collect(),
+                }),
+            },
+            self.program.mouse_interaction(bounds, cursor),
+        )
+    }
+
+    fn hash_layout(&self, state: &mut Hasher) {
+        struct Marker;
+        std::any::TypeId::of::<Marker>().hash(state);
+
+        self.width.hash(state);
+        self.height.hash(state);
+    }
+}
+
+impl<'a, Message, P, B> From<Canvas<Message, P>>
+    for Element<'a, Message, Renderer<B>>
+where
+    Message: 'static,
+    P: Program<Message> + 'a,
+    B: Backend,
+{
+    fn from(canvas: Canvas<Message, P>) -> Element<'a, Message, Renderer<B>> {
+        Element::new(canvas)
+    }
+}
diff --git a/graphics/src/widget/canvas/cache.rs b/graphics/src/widget/canvas/cache.rs
new file mode 100644
index 00000000..4b28d164
--- /dev/null
+++ b/graphics/src/widget/canvas/cache.rs
@@ -0,0 +1,108 @@
+use crate::{
+    canvas::{Frame, Geometry},
+    Primitive,
+};
+
+use iced_native::Size;
+use std::{cell::RefCell, sync::Arc};
+
+enum State {
+    Empty,
+    Filled {
+        bounds: Size,
+        primitive: Arc<Primitive>,
+    },
+}
+
+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
+/// change or it is explicitly cleared.
+///
+/// [`Layer`]: ../trait.Layer.html
+/// [`Cache`]: struct.Cache.html
+/// [`Geometry`]: struct.Geometry.html
+#[derive(Debug, Default)]
+pub struct Cache {
+    state: RefCell<State>,
+}
+
+impl Cache {
+    /// Creates a new empty [`Cache`].
+    ///
+    /// [`Cache`]: struct.Cache.html
+    pub fn new() -> Self {
+        Cache {
+            state: Default::default(),
+        }
+    }
+
+    /// Clears the [`Cache`], forcing a redraw the next time it is used.
+    ///
+    /// [`Cache`]: struct.Cache.html
+    pub fn clear(&mut 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.
+    ///
+    /// [`Cache`]: struct.Cache.html
+    pub fn draw(&self, bounds: Size, draw_fn: impl Fn(&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::from_primitive(Primitive::Cached {
+                    cache: primitive.clone(),
+                });
+            }
+        }
+
+        let mut frame = Frame::new(bounds);
+        draw_fn(&mut frame);
+
+        let primitive = {
+            let geometry = frame.into_geometry();
+
+            Arc::new(geometry.into_primitive())
+        };
+
+        *self.state.borrow_mut() = State::Filled {
+            bounds,
+            primitive: primitive.clone(),
+        };
+
+        Geometry::from_primitive(Primitive::Cached { cache: primitive })
+    }
+}
+
+impl std::fmt::Debug for State {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            State::Empty => write!(f, "Empty"),
+            State::Filled { primitive, bounds } => f
+                .debug_struct("Filled")
+                .field("primitive", primitive)
+                .field("bounds", bounds)
+                .finish(),
+        }
+    }
+}
diff --git a/graphics/src/widget/canvas/cursor.rs b/graphics/src/widget/canvas/cursor.rs
new file mode 100644
index 00000000..456760ea
--- /dev/null
+++ b/graphics/src/widget/canvas/cursor.rs
@@ -0,0 +1,72 @@
+use iced_native::{Point, Rectangle};
+
+/// The mouse cursor state.
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub enum Cursor {
+    /// The cursor has a defined position.
+    Available(Point),
+
+    /// The cursor is currently unavailable (i.e. out of bounds or busy).
+    Unavailable,
+}
+
+impl Cursor {
+    // TODO: Remove this once this type is used in `iced_native` to encode
+    // proper cursor availability
+    pub(crate) fn from_window_position(position: Point) -> Self {
+        if position.x < 0.0 || position.y < 0.0 {
+            Cursor::Unavailable
+        } else {
+            Cursor::Available(position)
+        }
+    }
+
+    /// Returns the absolute position of the [`Cursor`], if available.
+    ///
+    /// [`Cursor`]: enum.Cursor.html
+    pub fn position(&self) -> Option<Point> {
+        match self {
+            Cursor::Available(position) => Some(*position),
+            Cursor::Unavailable => None,
+        }
+    }
+
+    /// Returns the relative position of the [`Cursor`] inside the given bounds,
+    /// if available.
+    ///
+    /// If the [`Cursor`] is not over the provided bounds, this method will
+    /// return `None`.
+    ///
+    /// [`Cursor`]: enum.Cursor.html
+    pub fn position_in(&self, bounds: &Rectangle) -> Option<Point> {
+        if self.is_over(bounds) {
+            self.position_from(bounds.position())
+        } else {
+            None
+        }
+    }
+
+    /// Returns the relative position of the [`Cursor`] from the given origin,
+    /// if available.
+    ///
+    /// [`Cursor`]: enum.Cursor.html
+    pub fn position_from(&self, origin: Point) -> Option<Point> {
+        match self {
+            Cursor::Available(position) => {
+                Some(Point::new(position.x - origin.x, position.y - origin.y))
+            }
+            Cursor::Unavailable => None,
+        }
+    }
+
+    /// Returns whether the [`Cursor`] is currently over the provided bounds
+    /// or not.
+    ///
+    /// [`Cursor`]: enum.Cursor.html
+    pub fn is_over(&self, bounds: &Rectangle) -> bool {
+        match self {
+            Cursor::Available(position) => bounds.contains(*position),
+            Cursor::Unavailable => false,
+        }
+    }
+}
diff --git a/graphics/src/widget/canvas/event.rs b/graphics/src/widget/canvas/event.rs
new file mode 100644
index 00000000..ad11f51e
--- /dev/null
+++ b/graphics/src/widget/canvas/event.rs
@@ -0,0 +1,10 @@
+use iced_native::mouse;
+
+/// A [`Canvas`] event.
+///
+/// [`Canvas`]: struct.Event.html
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub enum Event {
+    /// A mouse event.
+    Mouse(mouse::Event),
+}
diff --git a/graphics/src/widget/canvas/fill.rs b/graphics/src/widget/canvas/fill.rs
new file mode 100644
index 00000000..a2010e45
--- /dev/null
+++ b/graphics/src/widget/canvas/fill.rs
@@ -0,0 +1,20 @@
+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)
+    }
+}
+
+impl From<Color> for Fill {
+    fn from(color: Color) -> Fill {
+        Fill::Color(color)
+    }
+}
diff --git a/graphics/src/widget/canvas/frame.rs b/graphics/src/widget/canvas/frame.rs
new file mode 100644
index 00000000..48d28d95
--- /dev/null
+++ b/graphics/src/widget/canvas/frame.rs
@@ -0,0 +1,367 @@
+use iced_native::{Point, Rectangle, Size, Vector};
+
+use crate::{
+    canvas::{Fill, Geometry, Path, Stroke, Text},
+    triangle, Primitive,
+};
+
+/// The frame of a [`Canvas`].
+///
+/// [`Canvas`]: struct.Canvas.html
+#[derive(Debug)]
+pub struct Frame {
+    size: Size,
+    buffers: lyon::tessellation::VertexBuffers<triangle::Vertex2D, u32>,
+    primitives: Vec<Primitive>,
+    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(size: Size) -> Frame {
+        Frame {
+            size,
+            buffers: lyon::tessellation::VertexBuffers::new(),
+            primitives: Vec::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.size.width
+    }
+
+    /// Returns the width of the [`Frame`].
+    ///
+    /// [`Frame`]: struct.Frame.html
+    #[inline]
+    pub fn height(&self) -> f32 {
+        self.size.height
+    }
+
+    /// Returns the dimensions of the [`Frame`].
+    ///
+    /// [`Frame`]: struct.Frame.html
+    #[inline]
+    pub fn size(&self) -> Size {
+        self.size
+    }
+
+    /// Returns the coordinate of the center of the [`Frame`].
+    ///
+    /// [`Frame`]: struct.Frame.html
+    #[inline]
+    pub fn center(&self) -> Point {
+        Point::new(self.size.width / 2.0, self.size.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: impl Into<Fill>) {
+        use lyon::tessellation::{
+            BuffersBuilder, FillOptions, FillTessellator,
+        };
+
+        let mut buffers = BuffersBuilder::new(
+            &mut self.buffers,
+            FillVertex(match fill.into() {
+                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 an axis-aligned rectangle given its top-left corner coordinate and
+    /// its `Size` on the [`Frame`] by filling it with the provided style.
+    ///
+    /// [`Frame`]: struct.Frame.html
+    pub fn fill_rectangle(
+        &mut self,
+        top_left: Point,
+        size: Size,
+        fill: impl Into<Fill>,
+    ) {
+        use lyon::tessellation::{BuffersBuilder, FillOptions};
+
+        let mut buffers = BuffersBuilder::new(
+            &mut self.buffers,
+            FillVertex(match fill.into() {
+                Fill::Color(color) => color.into_linear(),
+            }),
+        );
+
+        let top_left =
+            self.transforms.current.raw.transform_point(
+                lyon::math::Point::new(top_left.x, top_left.y),
+            );
+
+        let size =
+            self.transforms.current.raw.transform_vector(
+                lyon::math::Vector::new(size.width, size.height),
+            );
+
+        let _ = lyon::tessellation::basic_shapes::fill_rectangle(
+            &lyon::math::Rect::new(top_left, size.into()),
+            &FillOptions::default(),
+            &mut buffers,
+        )
+        .expect("Fill rectangle");
+    }
+
+    /// 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: impl Into<Stroke>) {
+        use lyon::tessellation::{
+            BuffersBuilder, StrokeOptions, StrokeTessellator,
+        };
+
+        let stroke = stroke.into();
+
+        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");
+    }
+
+    /// 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.
+    ///
+    /// [`Text`]: struct.Text.html
+    /// [`Frame`]: struct.Frame.html
+    /// [`Canvas`]: struct.Canvas.html
+    pub fn fill_text(&mut self, text: impl Into<Text>) {
+        use std::f32;
+
+        let text = text.into();
+
+        let position = if self.transforms.current.is_identity {
+            text.position
+        } else {
+            let transformed = self.transforms.current.raw.transform_point(
+                lyon::math::Point::new(text.position.x, text.position.y),
+            );
+
+            Point::new(transformed.x, transformed.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,
+        });
+    }
+
+    /// 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`] representing everything drawn on the [`Frame`].
+    ///
+    /// [`Frame`]: struct.Frame.html
+    /// [`Geometry`]: struct.Geometry.html
+    pub fn into_geometry(mut self) -> Geometry {
+        if !self.buffers.indices.is_empty() {
+            self.primitives.push(Primitive::Mesh2D {
+                buffers: triangle::Mesh2D {
+                    vertices: self.buffers.vertices,
+                    indices: self.buffers.indices,
+                },
+                size: self.size,
+            });
+        }
+
+        Geometry::from_primitive(Primitive::Group {
+            primitives: self.primitives,
+        })
+    }
+}
+
+struct FillVertex([f32; 4]);
+
+impl lyon::tessellation::BasicVertexConstructor<triangle::Vertex2D>
+    for FillVertex
+{
+    fn new_vertex(
+        &mut self,
+        position: lyon::math::Point,
+    ) -> triangle::Vertex2D {
+        triangle::Vertex2D {
+            position: [position.x, position.y],
+            color: self.0,
+        }
+    }
+}
+
+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,
+        }
+    }
+}
diff --git a/graphics/src/widget/canvas/geometry.rs b/graphics/src/widget/canvas/geometry.rs
new file mode 100644
index 00000000..4cadee39
--- /dev/null
+++ b/graphics/src/widget/canvas/geometry.rs
@@ -0,0 +1,34 @@
+use crate::Primitive;
+
+/// A bunch of shapes that can be drawn.
+///
+/// [`Geometry`] can be easily generated with a [`Frame`] or stored in a
+/// [`Cache`].
+///
+/// [`Geometry`]: struct.Geometry.html
+/// [`Frame`]: struct.Frame.html
+/// [`Cache`]: struct.Cache.html
+#[derive(Debug, Clone)]
+pub struct Geometry(Primitive);
+
+impl Geometry {
+    pub(crate) fn from_primitive(primitive: Primitive) -> Self {
+        Self(primitive)
+    }
+
+    /// Turns the [`Geometry`] into a [`Primitive`].
+    ///
+    /// This can be useful if you are building a custom widget.
+    ///
+    /// [`Geometry`]: struct.Geometry.html
+    /// [`Primitive`]: ../enum.Primitive.html
+    pub fn into_primitive(self) -> Primitive {
+        self.0
+    }
+}
+
+impl From<Geometry> for Primitive {
+    fn from(geometry: Geometry) -> Primitive {
+        geometry.0
+    }
+}
diff --git a/graphics/src/widget/canvas/path.rs b/graphics/src/widget/canvas/path.rs
new file mode 100644
index 00000000..c26bf187
--- /dev/null
+++ b/graphics/src/widget/canvas/path.rs
@@ -0,0 +1,79 @@
+//! Build different kinds of 2D shapes.
+pub mod arc;
+
+mod builder;
+
+#[doc(no_inline)]
+pub use arc::Arc;
+pub use builder::Builder;
+
+use iced_native::{Point, Size};
+
+/// 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()
+    }
+
+    /// Creates a new [`Path`] representing a line segment given its starting
+    /// and end points.
+    ///
+    /// [`Path`]: struct.Path.html
+    pub fn line(from: Point, to: Point) -> Self {
+        Self::new(|p| {
+            p.move_to(from);
+            p.line_to(to);
+        })
+    }
+
+    /// Creates a new [`Path`] representing a rectangle given its top-left
+    /// corner coordinate and its `Size`.
+    ///
+    /// [`Path`]: struct.Path.html
+    pub fn rectangle(top_left: Point, size: Size) -> Self {
+        Self::new(|p| p.rectangle(top_left, size))
+    }
+
+    /// Creates a new [`Path`] representing a circle given its center
+    /// coordinate and its radius.
+    ///
+    /// [`Path`]: struct.Path.html
+    pub fn circle(center: Point, radius: f32) -> Self {
+        Self::new(|p| p.circle(center, radius))
+    }
+
+    #[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),
+        }
+    }
+}
diff --git a/graphics/src/widget/canvas/path/arc.rs b/graphics/src/widget/canvas/path/arc.rs
new file mode 100644
index 00000000..343191f1
--- /dev/null
+++ b/graphics/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,
+        }
+    }
+}
diff --git a/graphics/src/widget/canvas/path/builder.rs b/graphics/src/widget/canvas/path/builder.rs
new file mode 100644
index 00000000..6511fa52
--- /dev/null
+++ b/graphics/src/widget/canvas/path/builder.rs
@@ -0,0 +1,180 @@
+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, top_left: Point, size: Size) {
+        self.move_to(top_left);
+        self.line_to(Point::new(top_left.x + size.width, top_left.y));
+        self.line_to(Point::new(
+            top_left.x + size.width,
+            top_left.y + size.height,
+        ));
+        self.line_to(Point::new(top_left.x, top_left.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(),
+        }
+    }
+}
diff --git a/graphics/src/widget/canvas/program.rs b/graphics/src/widget/canvas/program.rs
new file mode 100644
index 00000000..725d9d72
--- /dev/null
+++ b/graphics/src/widget/canvas/program.rs
@@ -0,0 +1,85 @@
+use crate::canvas::{Cursor, Event, Geometry};
+use iced_native::{mouse, Rectangle};
+
+/// The state and logic of a [`Canvas`].
+///
+/// A [`Program`] can mutate internal state and produce messages for an
+/// application.
+///
+/// [`Canvas`]: struct.Canvas.html
+/// [`Program`]: trait.Program.html
+pub trait Program<Message> {
+    /// Updates the state of the [`Program`].
+    ///
+    /// When a [`Program`] is used in a [`Canvas`], the runtime will call this
+    /// method for each [`Event`].
+    ///
+    /// This method can optionally return a `Message` to notify an application
+    /// of any meaningful interactions.
+    ///
+    /// By default, this method does and returns nothing.
+    ///
+    /// [`Program`]: trait.Program.html
+    /// [`Canvas`]: struct.Canvas.html
+    /// [`Event`]: enum.Event.html
+    fn update(
+        &mut self,
+        _event: Event,
+        _bounds: Rectangle,
+        _cursor: Cursor,
+    ) -> Option<Message> {
+        None
+    }
+
+    /// Draws the state of the [`Program`], producing a bunch of [`Geometry`].
+    ///
+    /// [`Geometry`] can be easily generated with a [`Frame`] or stored in a
+    /// [`Cache`].
+    ///
+    /// [`Program`]: trait.Program.html
+    /// [`Geometry`]: struct.Geometry.html
+    /// [`Frame`]: struct.Frame.html
+    /// [`Cache`]: struct.Cache.html
+    fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Vec<Geometry>;
+
+    /// Returns the current mouse interaction of the [`Program`].
+    ///
+    /// The interaction returned will be in effect even if the cursor position
+    /// is out of bounds of the program's [`Canvas`].
+    ///
+    /// [`Program`]: trait.Program.html
+    /// [`Canvas`]: struct.Canvas.html
+    fn mouse_interaction(
+        &self,
+        _bounds: Rectangle,
+        _cursor: Cursor,
+    ) -> mouse::Interaction {
+        mouse::Interaction::default()
+    }
+}
+
+impl<T, Message> Program<Message> for &mut T
+where
+    T: Program<Message>,
+{
+    fn update(
+        &mut self,
+        event: Event,
+        bounds: Rectangle,
+        cursor: Cursor,
+    ) -> Option<Message> {
+        T::update(self, event, bounds, cursor)
+    }
+
+    fn draw(&self, bounds: Rectangle, cursor: Cursor) -> Vec<Geometry> {
+        T::draw(self, bounds, cursor)
+    }
+
+    fn mouse_interaction(
+        &self,
+        bounds: Rectangle,
+        cursor: Cursor,
+    ) -> mouse::Interaction {
+        T::mouse_interaction(self, bounds, cursor)
+    }
+}
diff --git a/graphics/src/widget/canvas/stroke.rs b/graphics/src/widget/canvas/stroke.rs
new file mode 100644
index 00000000..5b6fc56a
--- /dev/null
+++ b/graphics/src/widget/canvas/stroke.rs
@@ -0,0 +1,115 @@
+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 Stroke {
+    /// Sets the color of the [`Stroke`].
+    ///
+    /// [`Stroke`]: struct.Stroke.html
+    pub fn with_color(self, color: Color) -> Stroke {
+        Stroke { color, ..self }
+    }
+
+    /// Sets the width of the [`Stroke`].
+    ///
+    /// [`Stroke`]: struct.Stroke.html
+    pub fn with_width(self, width: f32) -> Stroke {
+        Stroke { width, ..self }
+    }
+
+    /// Sets the [`LineCap`] of the [`Stroke`].
+    ///
+    /// [`LineCap`]: enum.LineCap.html
+    /// [`Stroke`]: struct.Stroke.html
+    pub fn with_line_cap(self, line_cap: LineCap) -> Stroke {
+        Stroke { line_cap, ..self }
+    }
+
+    /// Sets the [`LineJoin`] of the [`Stroke`].
+    ///
+    /// [`LineJoin`]: enum.LineJoin.html
+    /// [`Stroke`]: struct.Stroke.html
+    pub fn with_line_join(self, line_join: LineJoin) -> Stroke {
+        Stroke { line_join, ..self }
+    }
+}
+
+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,
+        }
+    }
+}
diff --git a/graphics/src/widget/canvas/text.rs b/graphics/src/widget/canvas/text.rs
new file mode 100644
index 00000000..c4cae30e
--- /dev/null
+++ b/graphics/src/widget/canvas/text.rs
@@ -0,0 +1,49 @@
+use iced_native::{Color, Font, HorizontalAlignment, Point, VerticalAlignment};
+
+/// A bunch of text that can be drawn to a canvas
+#[derive(Debug, Clone)]
+pub struct Text {
+    /// The contents of the text
+    pub content: String,
+    /// The position where to begin drawing the text (top-left corner coordinates)
+    pub position: Point,
+    /// The color of the text
+    pub color: Color,
+    /// The size of the text
+    pub size: f32,
+    /// The font of the text
+    pub font: Font,
+    /// The horizontal alignment of the text
+    pub horizontal_alignment: HorizontalAlignment,
+    /// The vertical alignment of the text
+    pub vertical_alignment: VerticalAlignment,
+}
+
+impl Default for Text {
+    fn default() -> Text {
+        Text {
+            content: String::new(),
+            position: Point::ORIGIN,
+            color: Color::BLACK,
+            size: 16.0,
+            font: Font::Default,
+            horizontal_alignment: HorizontalAlignment::Left,
+            vertical_alignment: VerticalAlignment::Top,
+        }
+    }
+}
+
+impl From<String> for Text {
+    fn from(content: String) -> Text {
+        Text {
+            content,
+            ..Default::default()
+        }
+    }
+}
+
+impl From<&str> for Text {
+    fn from(content: &str) -> Text {
+        String::from(content).into()
+    }
+}
diff --git a/graphics/src/widget/checkbox.rs b/graphics/src/widget/checkbox.rs
new file mode 100644
index 00000000..cb7fd2cf
--- /dev/null
+++ b/graphics/src/widget/checkbox.rs
@@ -0,0 +1,76 @@
+//! Show toggle controls using checkboxes.
+use crate::backend::{self, Backend};
+use crate::{Primitive, Renderer};
+use iced_native::checkbox;
+use iced_native::mouse;
+use iced_native::{HorizontalAlignment, Rectangle, VerticalAlignment};
+
+pub use iced_style::checkbox::{Style, StyleSheet};
+
+/// A box that can be checked.
+///
+/// This is an alias of an `iced_native` checkbox with an `iced_wgpu::Renderer`.
+pub type Checkbox<Message, Backend> =
+    iced_native::Checkbox<Message, Renderer<Backend>>;
+
+impl<B> checkbox::Renderer for Renderer<B>
+where
+    B: Backend + backend::Text,
+{
+    type Style = Box<dyn StyleSheet>;
+
+    const DEFAULT_SIZE: u16 = 20;
+    const DEFAULT_SPACING: u16 = 15;
+
+    fn draw(
+        &mut self,
+        bounds: Rectangle,
+        is_checked: bool,
+        is_mouse_over: bool,
+        (label, _): Self::Output,
+        style_sheet: &Self::Style,
+    ) -> Self::Output {
+        let style = if is_mouse_over {
+            style_sheet.hovered(is_checked)
+        } else {
+            style_sheet.active(is_checked)
+        };
+
+        let checkbox = Primitive::Quad {
+            bounds,
+            background: style.background,
+            border_radius: style.border_radius,
+            border_width: style.border_width,
+            border_color: style.border_color,
+        };
+
+        (
+            Primitive::Group {
+                primitives: if is_checked {
+                    let check = Primitive::Text {
+                        content: B::CHECKMARK_ICON.to_string(),
+                        font: B::ICON_FONT,
+                        size: bounds.height * 0.7,
+                        bounds: Rectangle {
+                            x: bounds.center_x(),
+                            y: bounds.center_y(),
+                            ..bounds
+                        },
+                        color: style.checkmark_color,
+                        horizontal_alignment: HorizontalAlignment::Center,
+                        vertical_alignment: VerticalAlignment::Center,
+                    };
+
+                    vec![checkbox, check, label]
+                } else {
+                    vec![checkbox, label]
+                },
+            },
+            if is_mouse_over {
+                mouse::Interaction::Pointer
+            } else {
+                mouse::Interaction::default()
+            },
+        )
+    }
+}
diff --git a/graphics/src/widget/column.rs b/graphics/src/widget/column.rs
new file mode 100644
index 00000000..6c7235c7
--- /dev/null
+++ b/graphics/src/widget/column.rs
@@ -0,0 +1,43 @@
+use crate::{Backend, Primitive, Renderer};
+use iced_native::column;
+use iced_native::mouse;
+use iced_native::{Element, Layout, Point};
+
+/// A container that distributes its contents vertically.
+pub type Column<'a, Message, Backend> =
+    iced_native::Column<'a, Message, Renderer<Backend>>;
+
+impl<B> column::Renderer for Renderer<B>
+where
+    B: Backend,
+{
+    fn draw<Message>(
+        &mut self,
+        defaults: &Self::Defaults,
+        content: &[Element<'_, Message, Self>],
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> Self::Output {
+        let mut mouse_interaction = mouse::Interaction::default();
+
+        (
+            Primitive::Group {
+                primitives: content
+                    .iter()
+                    .zip(layout.children())
+                    .map(|(child, layout)| {
+                        let (primitive, new_mouse_interaction) =
+                            child.draw(self, defaults, layout, cursor_position);
+
+                        if new_mouse_interaction > mouse_interaction {
+                            mouse_interaction = new_mouse_interaction;
+                        }
+
+                        primitive
+                    })
+                    .collect(),
+            },
+            mouse_interaction,
+        )
+    }
+}
diff --git a/graphics/src/widget/container.rs b/graphics/src/widget/container.rs
new file mode 100644
index 00000000..070cb48b
--- /dev/null
+++ b/graphics/src/widget/container.rs
@@ -0,0 +1,63 @@
+//! Decorate content and apply alignment.
+use crate::container;
+use crate::defaults::{self, Defaults};
+use crate::{Backend, Primitive, Renderer};
+use iced_native::{Background, Color, Element, Layout, Point, Rectangle};
+
+pub use iced_style::container::{Style, StyleSheet};
+
+/// An element decorating some content.
+///
+/// This is an alias of an `iced_native` container with a default
+/// `Renderer`.
+pub type Container<'a, Message, Backend> =
+    iced_native::Container<'a, Message, Renderer<Backend>>;
+
+impl<B> iced_native::container::Renderer for Renderer<B>
+where
+    B: Backend,
+{
+    type Style = Box<dyn container::StyleSheet>;
+
+    fn draw<Message>(
+        &mut self,
+        defaults: &Defaults,
+        bounds: Rectangle,
+        cursor_position: Point,
+        style_sheet: &Self::Style,
+        content: &Element<'_, Message, Self>,
+        content_layout: Layout<'_>,
+    ) -> Self::Output {
+        let style = style_sheet.style();
+
+        let defaults = Defaults {
+            text: defaults::Text {
+                color: style.text_color.unwrap_or(defaults.text.color),
+            },
+        };
+
+        let (content, mouse_interaction) =
+            content.draw(self, &defaults, content_layout, cursor_position);
+
+        if style.background.is_some() || style.border_width > 0 {
+            let quad = Primitive::Quad {
+                bounds,
+                background: style
+                    .background
+                    .unwrap_or(Background::Color(Color::TRANSPARENT)),
+                border_radius: style.border_radius,
+                border_width: style.border_width,
+                border_color: style.border_color,
+            };
+
+            (
+                Primitive::Group {
+                    primitives: vec![quad, content],
+                },
+                mouse_interaction,
+            )
+        } else {
+            (content, mouse_interaction)
+        }
+    }
+}
diff --git a/graphics/src/widget/image.rs b/graphics/src/widget/image.rs
new file mode 100644
index 00000000..30f446e8
--- /dev/null
+++ b/graphics/src/widget/image.rs
@@ -0,0 +1,31 @@
+//! Display images in your user interface.
+use crate::backend::{self, Backend};
+use crate::{Primitive, Renderer};
+use iced_native::image;
+use iced_native::mouse;
+use iced_native::Layout;
+
+pub use iced_native::image::{Handle, Image};
+
+impl<B> image::Renderer for Renderer<B>
+where
+    B: Backend + backend::Image,
+{
+    fn dimensions(&self, handle: &image::Handle) -> (u32, u32) {
+        self.backend().dimensions(handle)
+    }
+
+    fn draw(
+        &mut self,
+        handle: image::Handle,
+        layout: Layout<'_>,
+    ) -> Self::Output {
+        (
+            Primitive::Image {
+                handle,
+                bounds: layout.bounds(),
+            },
+            mouse::Interaction::default(),
+        )
+    }
+}
diff --git a/graphics/src/widget/pane_grid.rs b/graphics/src/widget/pane_grid.rs
new file mode 100644
index 00000000..56af683d
--- /dev/null
+++ b/graphics/src/widget/pane_grid.rs
@@ -0,0 +1,118 @@
+//! Let your users split regions of your application and organize layout dynamically.
+//!
+//! [![Pane grid - Iced](https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif)](https://gfycat.com/mixedflatjellyfish)
+//!
+//! # Example
+//! The [`pane_grid` example] showcases how to use a [`PaneGrid`] with resizing,
+//! drag and drop, and hotkey support.
+//!
+//! [`pane_grid` example]: https://github.com/hecrj/iced/tree/0.1/examples/pane_grid
+//! [`PaneGrid`]: type.PaneGrid.html
+use crate::{Backend, Primitive, Renderer};
+use iced_native::mouse;
+use iced_native::pane_grid;
+use iced_native::{Element, Layout, Point, Rectangle, Vector};
+
+pub use iced_native::pane_grid::{
+    Axis, Direction, DragEvent, Focus, KeyPressEvent, Pane, ResizeEvent, Split,
+    State,
+};
+
+/// A collection of panes distributed using either vertical or horizontal splits
+/// to completely fill the space available.
+///
+/// [![Pane grid - Iced](https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif)](https://gfycat.com/mixedflatjellyfish)
+///
+/// This is an alias of an `iced_native` pane grid with an `iced_wgpu::Renderer`.
+pub type PaneGrid<'a, Message, Backend> =
+    iced_native::PaneGrid<'a, Message, Renderer<Backend>>;
+
+impl<B> pane_grid::Renderer for Renderer<B>
+where
+    B: Backend,
+{
+    fn draw<Message>(
+        &mut self,
+        defaults: &Self::Defaults,
+        content: &[(Pane, Element<'_, Message, Self>)],
+        dragging: Option<Pane>,
+        resizing: Option<Axis>,
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> Self::Output {
+        let pane_cursor_position = if dragging.is_some() {
+            // TODO: Remove once cursor availability is encoded in the type
+            // system
+            Point::new(-1.0, -1.0)
+        } else {
+            cursor_position
+        };
+
+        let mut mouse_interaction = mouse::Interaction::default();
+        let mut dragged_pane = None;
+
+        let mut panes: Vec<_> = content
+            .iter()
+            .zip(layout.children())
+            .enumerate()
+            .map(|(i, ((id, pane), layout))| {
+                let (primitive, new_mouse_interaction) =
+                    pane.draw(self, defaults, layout, pane_cursor_position);
+
+                if new_mouse_interaction > mouse_interaction {
+                    mouse_interaction = new_mouse_interaction;
+                }
+
+                if Some(*id) == dragging {
+                    dragged_pane = Some((i, layout));
+                }
+
+                primitive
+            })
+            .collect();
+
+        let primitives = if let Some((index, layout)) = dragged_pane {
+            let pane = panes.remove(index);
+            let bounds = layout.bounds();
+
+            // TODO: Fix once proper layering is implemented.
+            // This is a pretty hacky way to achieve layering.
+            let clip = Primitive::Clip {
+                bounds: Rectangle {
+                    x: cursor_position.x - bounds.width / 2.0,
+                    y: cursor_position.y - bounds.height / 2.0,
+                    width: bounds.width + 0.5,
+                    height: bounds.height + 0.5,
+                },
+                offset: Vector::new(0, 0),
+                content: Box::new(Primitive::Translate {
+                    translation: Vector::new(
+                        cursor_position.x - bounds.x - bounds.width / 2.0,
+                        cursor_position.y - bounds.y - bounds.height / 2.0,
+                    ),
+                    content: Box::new(pane),
+                }),
+            };
+
+            panes.push(clip);
+
+            panes
+        } else {
+            panes
+        };
+
+        (
+            Primitive::Group { primitives },
+            if dragging.is_some() {
+                mouse::Interaction::Grabbing
+            } else if let Some(axis) = resizing {
+                match axis {
+                    Axis::Horizontal => mouse::Interaction::ResizingVertically,
+                    Axis::Vertical => mouse::Interaction::ResizingHorizontally,
+                }
+            } else {
+                mouse_interaction
+            },
+        )
+    }
+}
diff --git a/graphics/src/widget/progress_bar.rs b/graphics/src/widget/progress_bar.rs
new file mode 100644
index 00000000..48acb3c1
--- /dev/null
+++ b/graphics/src/widget/progress_bar.rs
@@ -0,0 +1,73 @@
+//! Allow your users to visually track the progress of a computation.
+//!
+//! A [`ProgressBar`] has a range of possible values and a current value,
+//! as well as a length, height and style.
+//!
+//! [`ProgressBar`]: type.ProgressBar.html
+use crate::{Backend, Primitive, Renderer};
+use iced_native::mouse;
+use iced_native::progress_bar;
+use iced_native::{Color, Rectangle};
+
+pub use iced_style::progress_bar::{Style, StyleSheet};
+
+/// A bar that displays progress.
+///
+/// This is an alias of an `iced_native` progress bar with an
+/// `iced_wgpu::Renderer`.
+pub type ProgressBar<Backend> = iced_native::ProgressBar<Renderer<Backend>>;
+
+impl<B> progress_bar::Renderer for Renderer<B>
+where
+    B: Backend,
+{
+    type Style = Box<dyn StyleSheet>;
+
+    const DEFAULT_HEIGHT: u16 = 30;
+
+    fn draw(
+        &self,
+        bounds: Rectangle,
+        range: std::ops::RangeInclusive<f32>,
+        value: f32,
+        style_sheet: &Self::Style,
+    ) -> Self::Output {
+        let style = style_sheet.style();
+
+        let (range_start, range_end) = range.into_inner();
+        let active_progress_width = bounds.width
+            * ((value - range_start) / (range_end - range_start).max(1.0));
+
+        let background = Primitive::Group {
+            primitives: vec![Primitive::Quad {
+                bounds: Rectangle { ..bounds },
+                background: style.background,
+                border_radius: style.border_radius,
+                border_width: 0,
+                border_color: Color::TRANSPARENT,
+            }],
+        };
+
+        (
+            if active_progress_width > 0.0 {
+                let bar = Primitive::Quad {
+                    bounds: Rectangle {
+                        width: active_progress_width,
+                        ..bounds
+                    },
+                    background: style.bar,
+                    border_radius: style.border_radius,
+                    border_width: 0,
+                    border_color: Color::TRANSPARENT,
+                };
+
+                Primitive::Group {
+                    primitives: vec![background, bar],
+                }
+            } else {
+                background
+            },
+            mouse::Interaction::default(),
+        )
+    }
+}
diff --git a/graphics/src/widget/radio.rs b/graphics/src/widget/radio.rs
new file mode 100644
index 00000000..dd8b5f17
--- /dev/null
+++ b/graphics/src/widget/radio.rs
@@ -0,0 +1,78 @@
+//! Create choices using radio buttons.
+use crate::{Backend, Primitive, Renderer};
+use iced_native::mouse;
+use iced_native::radio;
+use iced_native::{Background, Color, Rectangle};
+
+pub use iced_style::radio::{Style, StyleSheet};
+
+/// A circular button representing a choice.
+///
+/// This is an alias of an `iced_native` radio button with an
+/// `iced_wgpu::Renderer`.
+pub type Radio<Message, Backend> =
+    iced_native::Radio<Message, Renderer<Backend>>;
+
+const SIZE: f32 = 28.0;
+const DOT_SIZE: f32 = SIZE / 2.0;
+
+impl<B> radio::Renderer for Renderer<B>
+where
+    B: Backend,
+{
+    type Style = Box<dyn StyleSheet>;
+
+    const DEFAULT_SIZE: u16 = SIZE as u16;
+    const DEFAULT_SPACING: u16 = 15;
+
+    fn draw(
+        &mut self,
+        bounds: Rectangle,
+        is_selected: bool,
+        is_mouse_over: bool,
+        (label, _): Self::Output,
+        style_sheet: &Self::Style,
+    ) -> Self::Output {
+        let style = if is_mouse_over {
+            style_sheet.hovered()
+        } else {
+            style_sheet.active()
+        };
+
+        let radio = Primitive::Quad {
+            bounds,
+            background: style.background,
+            border_radius: (SIZE / 2.0) as u16,
+            border_width: style.border_width,
+            border_color: style.border_color,
+        };
+
+        (
+            Primitive::Group {
+                primitives: if is_selected {
+                    let radio_circle = Primitive::Quad {
+                        bounds: Rectangle {
+                            x: bounds.x + DOT_SIZE / 2.0,
+                            y: bounds.y + DOT_SIZE / 2.0,
+                            width: bounds.width - DOT_SIZE,
+                            height: bounds.height - DOT_SIZE,
+                        },
+                        background: Background::Color(style.dot_color),
+                        border_radius: (DOT_SIZE / 2.0) as u16,
+                        border_width: 0,
+                        border_color: Color::TRANSPARENT,
+                    };
+
+                    vec![radio, radio_circle, label]
+                } else {
+                    vec![radio, label]
+                },
+            },
+            if is_mouse_over {
+                mouse::Interaction::Pointer
+            } else {
+                mouse::Interaction::default()
+            },
+        )
+    }
+}
diff --git a/graphics/src/widget/row.rs b/graphics/src/widget/row.rs
new file mode 100644
index 00000000..4c1dbadc
--- /dev/null
+++ b/graphics/src/widget/row.rs
@@ -0,0 +1,43 @@
+use crate::{Backend, Primitive, Renderer};
+use iced_native::mouse;
+use iced_native::row;
+use iced_native::{Element, Layout, Point};
+
+/// A container that distributes its contents horizontally.
+pub type Row<'a, Message, Backend> =
+    iced_native::Row<'a, Message, Renderer<Backend>>;
+
+impl<B> row::Renderer for Renderer<B>
+where
+    B: Backend,
+{
+    fn draw<Message>(
+        &mut self,
+        defaults: &Self::Defaults,
+        content: &[Element<'_, Message, Self>],
+        layout: Layout<'_>,
+        cursor_position: Point,
+    ) -> Self::Output {
+        let mut mouse_interaction = mouse::Interaction::default();
+
+        (
+            Primitive::Group {
+                primitives: content
+                    .iter()
+                    .zip(layout.children())
+                    .map(|(child, layout)| {
+                        let (primitive, new_mouse_interaction) =
+                            child.draw(self, defaults, layout, cursor_position);
+
+                        if new_mouse_interaction > mouse_interaction {
+                            mouse_interaction = new_mouse_interaction;
+                        }
+
+                        primitive
+                    })
+                    .collect(),
+            },
+            mouse_interaction,
+        )
+    }
+}
diff --git a/graphics/src/widget/scrollable.rs b/graphics/src/widget/scrollable.rs
new file mode 100644
index 00000000..b149db0a
--- /dev/null
+++ b/graphics/src/widget/scrollable.rs
@@ -0,0 +1,142 @@
+//! Navigate an endless amount of content with a scrollbar.
+use crate::{Backend, Primitive, Renderer};
+use iced_native::mouse;
+use iced_native::scrollable;
+use iced_native::{Background, Color, Rectangle, Vector};
+
+pub use iced_native::scrollable::State;
+pub use iced_style::scrollable::{Scrollbar, Scroller, StyleSheet};
+
+/// A widget that can vertically display an infinite amount of content
+/// with a scrollbar.
+///
+/// This is an alias of an `iced_native` scrollable with a default
+/// `Renderer`.
+pub type Scrollable<'a, Message, Backend> =
+    iced_native::Scrollable<'a, Message, Renderer<Backend>>;
+
+const SCROLLBAR_WIDTH: u16 = 10;
+const SCROLLBAR_MARGIN: u16 = 2;
+
+impl<B> scrollable::Renderer for Renderer<B>
+where
+    B: Backend,
+{
+    type Style = Box<dyn iced_style::scrollable::StyleSheet>;
+
+    fn scrollbar(
+        &self,
+        bounds: Rectangle,
+        content_bounds: Rectangle,
+        offset: u32,
+    ) -> Option<scrollable::Scrollbar> {
+        if content_bounds.height > bounds.height {
+            let scrollbar_bounds = Rectangle {
+                x: bounds.x + bounds.width
+                    - f32::from(SCROLLBAR_WIDTH + 2 * SCROLLBAR_MARGIN),
+                y: bounds.y,
+                width: f32::from(SCROLLBAR_WIDTH + 2 * SCROLLBAR_MARGIN),
+                height: bounds.height,
+            };
+
+            let ratio = bounds.height / content_bounds.height;
+            let scrollbar_height = bounds.height * ratio;
+            let y_offset = offset as f32 * ratio;
+
+            let scroller_bounds = Rectangle {
+                x: scrollbar_bounds.x + f32::from(SCROLLBAR_MARGIN),
+                y: scrollbar_bounds.y + y_offset,
+                width: scrollbar_bounds.width - f32::from(2 * SCROLLBAR_MARGIN),
+                height: scrollbar_height,
+            };
+
+            Some(scrollable::Scrollbar {
+                bounds: scrollbar_bounds,
+                scroller: scrollable::Scroller {
+                    bounds: scroller_bounds,
+                },
+            })
+        } else {
+            None
+        }
+    }
+
+    fn draw(
+        &mut self,
+        state: &scrollable::State,
+        bounds: Rectangle,
+        _content_bounds: Rectangle,
+        is_mouse_over: bool,
+        is_mouse_over_scrollbar: bool,
+        scrollbar: Option<scrollable::Scrollbar>,
+        offset: u32,
+        style_sheet: &Self::Style,
+        (content, mouse_interaction): Self::Output,
+    ) -> Self::Output {
+        (
+            if let Some(scrollbar) = scrollbar {
+                let clip = Primitive::Clip {
+                    bounds,
+                    offset: Vector::new(0, offset),
+                    content: Box::new(content),
+                };
+
+                let style = if state.is_scroller_grabbed() {
+                    style_sheet.dragging()
+                } else if is_mouse_over_scrollbar {
+                    style_sheet.hovered()
+                } else {
+                    style_sheet.active()
+                };
+
+                let is_scrollbar_visible =
+                    style.background.is_some() || style.border_width > 0;
+
+                let scroller = if is_mouse_over
+                    || state.is_scroller_grabbed()
+                    || is_scrollbar_visible
+                {
+                    Primitive::Quad {
+                        bounds: scrollbar.scroller.bounds,
+                        background: Background::Color(style.scroller.color),
+                        border_radius: style.scroller.border_radius,
+                        border_width: style.scroller.border_width,
+                        border_color: style.scroller.border_color,
+                    }
+                } else {
+                    Primitive::None
+                };
+
+                let scrollbar = if is_scrollbar_visible {
+                    Primitive::Quad {
+                        bounds: Rectangle {
+                            x: scrollbar.bounds.x + f32::from(SCROLLBAR_MARGIN),
+                            width: scrollbar.bounds.width
+                                - f32::from(2 * SCROLLBAR_MARGIN),
+                            ..scrollbar.bounds
+                        },
+                        background: style
+                            .background
+                            .unwrap_or(Background::Color(Color::TRANSPARENT)),
+                        border_radius: style.border_radius,
+                        border_width: style.border_width,
+                        border_color: style.border_color,
+                    }
+                } else {
+                    Primitive::None
+                };
+
+                Primitive::Group {
+                    primitives: vec![clip, scrollbar, scroller],
+                }
+            } else {
+                content
+            },
+            if is_mouse_over_scrollbar || state.is_scroller_grabbed() {
+                mouse::Interaction::Idle
+            } else {
+                mouse_interaction
+            },
+        )
+    }
+}
diff --git a/graphics/src/widget/slider.rs b/graphics/src/widget/slider.rs
new file mode 100644
index 00000000..b00cde9a
--- /dev/null
+++ b/graphics/src/widget/slider.rs
@@ -0,0 +1,124 @@
+//! Display an interactive selector of a single value from a range of values.
+//!
+//! A [`Slider`] has some local [`State`].
+//!
+//! [`Slider`]: struct.Slider.html
+//! [`State`]: struct.State.html
+use crate::{Backend, Primitive, Renderer};
+use iced_native::mouse;
+use iced_native::slider;
+use iced_native::{Background, Color, Point, Rectangle};
+
+pub use iced_native::slider::State;
+pub use iced_style::slider::{Handle, HandleShape, Style, StyleSheet};
+
+/// An horizontal bar and a handle that selects a single value from a range of
+/// values.
+///
+/// This is an alias of an `iced_native` slider with an `iced_wgpu::Renderer`.
+pub type Slider<'a, Message, Backend> =
+    iced_native::Slider<'a, Message, Renderer<Backend>>;
+
+const HANDLE_HEIGHT: f32 = 22.0;
+
+impl<B> slider::Renderer for Renderer<B>
+where
+    B: Backend,
+{
+    type Style = Box<dyn StyleSheet>;
+
+    fn height(&self) -> u32 {
+        30
+    }
+
+    fn draw(
+        &mut self,
+        bounds: Rectangle,
+        cursor_position: Point,
+        range: std::ops::RangeInclusive<f32>,
+        value: f32,
+        is_dragging: bool,
+        style_sheet: &Self::Style,
+    ) -> Self::Output {
+        let is_mouse_over = bounds.contains(cursor_position);
+
+        let style = if is_dragging {
+            style_sheet.dragging()
+        } else if is_mouse_over {
+            style_sheet.hovered()
+        } else {
+            style_sheet.active()
+        };
+
+        let rail_y = bounds.y + (bounds.height / 2.0).round();
+
+        let (rail_top, rail_bottom) = (
+            Primitive::Quad {
+                bounds: Rectangle {
+                    x: bounds.x,
+                    y: rail_y,
+                    width: bounds.width,
+                    height: 2.0,
+                },
+                background: Background::Color(style.rail_colors.0),
+                border_radius: 0,
+                border_width: 0,
+                border_color: Color::TRANSPARENT,
+            },
+            Primitive::Quad {
+                bounds: Rectangle {
+                    x: bounds.x,
+                    y: rail_y + 2.0,
+                    width: bounds.width,
+                    height: 2.0,
+                },
+                background: Background::Color(style.rail_colors.1),
+                border_radius: 0,
+                border_width: 0,
+                border_color: Color::TRANSPARENT,
+            },
+        );
+
+        let (range_start, range_end) = range.into_inner();
+
+        let (handle_width, handle_height, handle_border_radius) =
+            match style.handle.shape {
+                HandleShape::Circle { radius } => {
+                    (f32::from(radius * 2), f32::from(radius * 2), radius)
+                }
+                HandleShape::Rectangle {
+                    width,
+                    border_radius,
+                } => (f32::from(width), HANDLE_HEIGHT, border_radius),
+            };
+
+        let handle_offset = (bounds.width - handle_width)
+            * ((value - range_start) / (range_end - range_start).max(1.0));
+
+        let handle = Primitive::Quad {
+            bounds: Rectangle {
+                x: bounds.x + handle_offset.round(),
+                y: rail_y - handle_height / 2.0,
+                width: handle_width,
+                height: handle_height,
+            },
+            background: Background::Color(style.handle.color),
+            border_radius: handle_border_radius,
+            border_width: style.handle.border_width,
+            border_color: style.handle.border_color,
+        };
+
+        (
+            Primitive::Group {
+                primitives: vec![rail_top, rail_bottom, handle],
+            },
+            if is_dragging {
+                mouse::Interaction::Grabbing
+            } else if is_mouse_over {
+                mouse::Interaction::Grab
+            } else {
+                mouse::Interaction::default()
+            },
+        )
+    }
+}
diff --git a/graphics/src/widget/space.rs b/graphics/src/widget/space.rs
new file mode 100644
index 00000000..1f31eabe
--- /dev/null
+++ b/graphics/src/widget/space.rs
@@ -0,0 +1,15 @@
+use crate::{Backend, Primitive, Renderer};
+use iced_native::mouse;
+use iced_native::space;
+use iced_native::Rectangle;
+
+pub use iced_native::Space;
+
+impl<B> space::Renderer for Renderer<B>
+where
+    B: Backend,
+{
+    fn draw(&mut self, _bounds: Rectangle) -> Self::Output {
+        (Primitive::None, mouse::Interaction::default())
+    }
+}
diff --git a/graphics/src/widget/svg.rs b/graphics/src/widget/svg.rs
new file mode 100644
index 00000000..8b5ed66a
--- /dev/null
+++ b/graphics/src/widget/svg.rs
@@ -0,0 +1,29 @@
+//! Display vector graphics in your application.
+use crate::backend::{self, Backend};
+use crate::{Primitive, Renderer};
+use iced_native::{mouse, svg, Layout};
+
+pub use iced_native::svg::{Handle, Svg};
+
+impl<B> svg::Renderer for Renderer<B>
+where
+    B: Backend + backend::Svg,
+{
+    fn dimensions(&self, handle: &svg::Handle) -> (u32, u32) {
+        self.backend().viewport_dimensions(handle)
+    }
+
+    fn draw(
+        &mut self,
+        handle: svg::Handle,
+        layout: Layout<'_>,
+    ) -> Self::Output {
+        (
+            Primitive::Svg {
+                handle,
+                bounds: layout.bounds(),
+            },
+            mouse::Interaction::default(),
+        )
+    }
+}
diff --git a/graphics/src/widget/text.rs b/graphics/src/widget/text.rs
new file mode 100644
index 00000000..327f8e29
--- /dev/null
+++ b/graphics/src/widget/text.rs
@@ -0,0 +1,72 @@
+//! Write some text for your users to read.
+use crate::backend::{self, Backend};
+use crate::{Primitive, Renderer};
+use iced_native::mouse;
+use iced_native::text;
+use iced_native::{
+    Color, Font, HorizontalAlignment, Rectangle, Size, VerticalAlignment,
+};
+
+/// A paragraph of text.
+///
+/// This is an alias of an `iced_native` text with an `iced_wgpu::Renderer`.
+pub type Text<Backend> = iced_native::Text<Renderer<Backend>>;
+
+use std::f32;
+
+impl<B> text::Renderer for Renderer<B>
+where
+    B: Backend + backend::Text,
+{
+    type Font = Font;
+
+    const DEFAULT_SIZE: u16 = 20;
+
+    fn measure(
+        &self,
+        content: &str,
+        size: u16,
+        font: Font,
+        bounds: Size,
+    ) -> (f32, f32) {
+        self.backend()
+            .measure(content, f32::from(size), font, bounds)
+    }
+
+    fn draw(
+        &mut self,
+        defaults: &Self::Defaults,
+        bounds: Rectangle,
+        content: &str,
+        size: u16,
+        font: Font,
+        color: Option<Color>,
+        horizontal_alignment: HorizontalAlignment,
+        vertical_alignment: VerticalAlignment,
+    ) -> Self::Output {
+        let x = match horizontal_alignment {
+            iced_native::HorizontalAlignment::Left => bounds.x,
+            iced_native::HorizontalAlignment::Center => bounds.center_x(),
+            iced_native::HorizontalAlignment::Right => bounds.x + bounds.width,
+        };
+
+        let y = match vertical_alignment {
+            iced_native::VerticalAlignment::Top => bounds.y,
+            iced_native::VerticalAlignment::Center => bounds.center_y(),
+            iced_native::VerticalAlignment::Bottom => bounds.y + bounds.height,
+        };
+
+        (
+            Primitive::Text {
+                content: content.to_string(),
+                size: f32::from(size),
+                bounds: Rectangle { x, y, ..bounds },
+                color: color.unwrap_or(defaults.text.color),
+                font,
+                horizontal_alignment,
+                vertical_alignment,
+            },
+            mouse::Interaction::default(),
+        )
+    }
+}
diff --git a/graphics/src/widget/text_input.rs b/graphics/src/widget/text_input.rs
new file mode 100644
index 00000000..893197d1
--- /dev/null
+++ b/graphics/src/widget/text_input.rs
@@ -0,0 +1,273 @@
+//! Display fields that can be filled with text.
+//!
+//! A [`TextInput`] has some local [`State`].
+//!
+//! [`TextInput`]: struct.TextInput.html
+//! [`State`]: struct.State.html
+use crate::backend::{self, Backend};
+use crate::{Primitive, Renderer};
+use iced_native::mouse;
+use iced_native::text_input::{self, cursor};
+use iced_native::{
+    Background, Color, Font, HorizontalAlignment, Point, Rectangle, Size,
+    Vector, VerticalAlignment,
+};
+use std::f32;
+
+pub use iced_native::text_input::State;
+pub use iced_style::text_input::{Style, StyleSheet};
+
+/// A field that can be filled with text.
+///
+/// This is an alias of an `iced_native` text input with an `iced_wgpu::Renderer`.
+pub type TextInput<'a, Message, Backend> =
+    iced_native::TextInput<'a, Message, Renderer<Backend>>;
+
+impl<B> text_input::Renderer for Renderer<B>
+where
+    B: Backend + backend::Text,
+{
+    type Style = Box<dyn StyleSheet>;
+
+    fn default_size(&self) -> u16 {
+        // TODO: Make this configurable
+        20
+    }
+
+    fn measure_value(&self, value: &str, size: u16, font: Font) -> f32 {
+        let backend = self.backend();
+
+        let (width, _) =
+            backend.measure(value, f32::from(size), font, Size::INFINITY);
+
+        width
+    }
+
+    fn offset(
+        &self,
+        text_bounds: Rectangle,
+        font: Font,
+        size: u16,
+        value: &text_input::Value,
+        state: &text_input::State,
+    ) -> f32 {
+        if state.is_focused() {
+            let cursor = state.cursor();
+
+            let focus_position = match cursor.state(value) {
+                cursor::State::Index(i) => i,
+                cursor::State::Selection { end, .. } => end,
+            };
+
+            let (_, offset) = measure_cursor_and_scroll_offset(
+                self,
+                text_bounds,
+                value,
+                size,
+                focus_position,
+                font,
+            );
+
+            offset
+        } else {
+            0.0
+        }
+    }
+
+    fn draw(
+        &mut self,
+        bounds: Rectangle,
+        text_bounds: Rectangle,
+        cursor_position: Point,
+        font: Font,
+        size: u16,
+        placeholder: &str,
+        value: &text_input::Value,
+        state: &text_input::State,
+        style_sheet: &Self::Style,
+    ) -> Self::Output {
+        let is_mouse_over = bounds.contains(cursor_position);
+
+        let style = if state.is_focused() {
+            style_sheet.focused()
+        } else if is_mouse_over {
+            style_sheet.hovered()
+        } else {
+            style_sheet.active()
+        };
+
+        let input = Primitive::Quad {
+            bounds,
+            background: style.background,
+            border_radius: style.border_radius,
+            border_width: style.border_width,
+            border_color: style.border_color,
+        };
+
+        let text = value.to_string();
+
+        let text_value = Primitive::Text {
+            content: if text.is_empty() {
+                placeholder.to_string()
+            } else {
+                text.clone()
+            },
+            color: if text.is_empty() {
+                style_sheet.placeholder_color()
+            } else {
+                style_sheet.value_color()
+            },
+            font,
+            bounds: Rectangle {
+                y: text_bounds.center_y(),
+                width: f32::INFINITY,
+                ..text_bounds
+            },
+            size: f32::from(size),
+            horizontal_alignment: HorizontalAlignment::Left,
+            vertical_alignment: VerticalAlignment::Center,
+        };
+
+        let (contents_primitive, offset) = if state.is_focused() {
+            let cursor = state.cursor();
+
+            let (cursor_primitive, offset) = match cursor.state(value) {
+                cursor::State::Index(position) => {
+                    let (text_value_width, offset) =
+                        measure_cursor_and_scroll_offset(
+                            self,
+                            text_bounds,
+                            value,
+                            size,
+                            position,
+                            font,
+                        );
+
+                    (
+                        Primitive::Quad {
+                            bounds: Rectangle {
+                                x: text_bounds.x + text_value_width,
+                                y: text_bounds.y,
+                                width: 1.0,
+                                height: text_bounds.height,
+                            },
+                            background: Background::Color(
+                                style_sheet.value_color(),
+                            ),
+                            border_radius: 0,
+                            border_width: 0,
+                            border_color: Color::TRANSPARENT,
+                        },
+                        offset,
+                    )
+                }
+                cursor::State::Selection { start, end } => {
+                    let left = start.min(end);
+                    let right = end.max(start);
+
+                    let (left_position, left_offset) =
+                        measure_cursor_and_scroll_offset(
+                            self,
+                            text_bounds,
+                            value,
+                            size,
+                            left,
+                            font,
+                        );
+
+                    let (right_position, right_offset) =
+                        measure_cursor_and_scroll_offset(
+                            self,
+                            text_bounds,
+                            value,
+                            size,
+                            right,
+                            font,
+                        );
+
+                    let width = right_position - left_position;
+
+                    (
+                        Primitive::Quad {
+                            bounds: Rectangle {
+                                x: text_bounds.x + left_position,
+                                y: text_bounds.y,
+                                width,
+                                height: text_bounds.height,
+                            },
+                            background: Background::Color(
+                                style_sheet.selection_color(),
+                            ),
+                            border_radius: 0,
+                            border_width: 0,
+                            border_color: Color::TRANSPARENT,
+                        },
+                        if end == right {
+                            right_offset
+                        } else {
+                            left_offset
+                        },
+                    )
+                }
+            };
+
+            (
+                Primitive::Group {
+                    primitives: vec![cursor_primitive, text_value],
+                },
+                Vector::new(offset as u32, 0),
+            )
+        } else {
+            (text_value, Vector::new(0, 0))
+        };
+
+        let text_width = self.measure_value(
+            if text.is_empty() { placeholder } else { &text },
+            size,
+            font,
+        );
+
+        let contents = if text_width > text_bounds.width {
+            Primitive::Clip {
+                bounds: text_bounds,
+                offset,
+                content: Box::new(contents_primitive),
+            }
+        } else {
+            contents_primitive
+        };
+
+        (
+            Primitive::Group {
+                primitives: vec![input, contents],
+            },
+            if is_mouse_over {
+                mouse::Interaction::Text
+            } else {
+                mouse::Interaction::default()
+            },
+        )
+    }
+}
+
+fn measure_cursor_and_scroll_offset<B>(
+    renderer: &Renderer<B>,
+    text_bounds: Rectangle,
+    value: &text_input::Value,
+    size: u16,
+    cursor_index: usize,
+    font: Font,
+) -> (f32, f32)
+where
+    B: Backend + backend::Text,
+{
+    use iced_native::text_input::Renderer;
+
+    let text_before_cursor = value.until(cursor_index).to_string();
+
+    let text_value_width =
+        renderer.measure_value(&text_before_cursor, size, font);
+    let offset = ((text_value_width + 5.0) - text_bounds.width).max(0.0);
+
+    (text_value_width, offset)
+}
diff --git a/graphics/src/window.rs b/graphics/src/window.rs
new file mode 100644
index 00000000..3e74db5f
--- /dev/null
+++ b/graphics/src/window.rs
@@ -0,0 +1,10 @@
+//! Draw graphics to window surfaces.
+mod compositor;
+
+#[cfg(feature = "opengl")]
+mod gl_compositor;
+
+pub use compositor::Compositor;
+
+#[cfg(feature = "opengl")]
+pub use gl_compositor::GLCompositor;
diff --git a/graphics/src/window/compositor.rs b/graphics/src/window/compositor.rs
new file mode 100644
index 00000000..d5920c95
--- /dev/null
+++ b/graphics/src/window/compositor.rs
@@ -0,0 +1,55 @@
+use crate::Viewport;
+use iced_native::mouse;
+use raw_window_handle::HasRawWindowHandle;
+
+/// A graphics compositor that can draw to windows.
+pub trait Compositor: Sized {
+    /// The settings of the backend.
+    type Settings: Default;
+
+    /// The iced renderer of the backend.
+    type Renderer: iced_native::Renderer;
+
+    /// The surface of the backend.
+    type Surface;
+
+    /// The swap chain of the backend.
+    type SwapChain;
+
+    /// Creates a new [`Backend`].
+    ///
+    /// [`Backend`]: trait.Backend.html
+    fn new(settings: Self::Settings) -> (Self, Self::Renderer);
+
+    /// Crates a new [`Surface`] for the given window.
+    ///
+    /// [`Surface`]: #associatedtype.Surface
+    fn create_surface<W: HasRawWindowHandle>(
+        &mut self,
+        window: &W,
+    ) -> Self::Surface;
+
+    /// Crates a new [`SwapChain`] for the given [`Surface`].
+    ///
+    /// [`SwapChain`]: #associatedtype.SwapChain
+    /// [`Surface`]: #associatedtype.Surface
+    fn create_swap_chain(
+        &mut self,
+        surface: &Self::Surface,
+        width: u32,
+        height: u32,
+    ) -> Self::SwapChain;
+
+    /// Draws the output primitives to the next frame of the given [`SwapChain`].
+    ///
+    /// [`SwapChain`]: #associatedtype.SwapChain
+    /// [`Surface`]: #associatedtype.Surface
+    fn draw<T: AsRef<str>>(
+        &mut self,
+        renderer: &mut Self::Renderer,
+        swap_chain: &mut Self::SwapChain,
+        viewport: &Viewport,
+        output: &<Self::Renderer as iced_native::Renderer>::Output,
+        overlay: &[T],
+    ) -> mouse::Interaction;
+}
diff --git a/graphics/src/window/gl_compositor.rs b/graphics/src/window/gl_compositor.rs
new file mode 100644
index 00000000..542213b5
--- /dev/null
+++ b/graphics/src/window/gl_compositor.rs
@@ -0,0 +1,67 @@
+use crate::{Size, Viewport};
+use iced_native::mouse;
+
+use core::ffi::c_void;
+
+/// A basic OpenGL compositor.
+///
+/// A compositor is responsible for initializing a renderer and managing window
+/// surfaces.
+///
+/// For now, this compositor only deals with a single global surface
+/// for drawing. However, the trait will most likely change in the near future
+/// to handle multiple surfaces at once.
+///
+/// If you implement an OpenGL renderer, you can implement this trait to ease
+/// integration with existing windowing shells, like `iced_glutin`.
+pub trait GLCompositor: Sized {
+    /// The renderer of the [`Compositor`].
+    ///
+    /// This should point to your renderer type, which could be a type alias
+    /// of the [`Renderer`] provided in this crate with with a specific
+    /// [`Backend`].
+    ///
+    /// [`Compositor`]: trait.Compositor.html
+    /// [`Renderer`]: ../struct.Renderer.html
+    /// [`Backend`]: ../backend/trait.Backend.html
+    type Renderer: iced_native::Renderer;
+
+    /// The settings of the [`Compositor`].
+    ///
+    /// It's up to you to decide the configuration supported by your renderer!
+    type Settings: Default;
+
+    /// Creates a new [`Compositor`] and [`Renderer`] with the given
+    /// [`Settings`] and an OpenGL address loader function.
+    ///
+    /// [`Compositor`]: trait.Compositor.html
+    /// [`Renderer`]: #associatedtype.Renderer
+    /// [`Backend`]: ../backend/trait.Backend.html
+    #[allow(unsafe_code)]
+    unsafe fn new(
+        settings: Self::Settings,
+        loader_function: impl FnMut(&str) -> *const c_void,
+    ) -> (Self, Self::Renderer);
+
+    /// Returns the amount of samples that should be used when configuring
+    /// an OpenGL context for this [`Compositor`].
+    ///
+    /// [`Compositor`]: trait.Compositor.html
+    fn sample_count(settings: &Self::Settings) -> u32;
+
+    /// Resizes the viewport of the [`Compositor`].
+    ///
+    /// [`Compositor`]: trait.Compositor.html
+    fn resize_viewport(&mut self, physical_size: Size<u32>);
+
+    /// Draws the provided output with the given [`Renderer`].
+    ///
+    /// [`Compositor`]: trait.Compositor.html
+    fn draw<T: AsRef<str>>(
+        &mut self,
+        renderer: &mut Self::Renderer,
+        viewport: &Viewport,
+        output: &<Self::Renderer as iced_native::Renderer>::Output,
+        overlay: &[T],
+    ) -> mouse::Interaction;
+}