Implement `Canvas` support for `iced_tiny_skia`

14 files changed, 1029 insertions, 1 deletions

diff --git a/native/Cargo.toml b/native/Cargo.toml
index 3f92783e..23533e33 100644
--- a/native/Cargo.toml
+++ b/native/Cargo.toml
@@ -8,12 +8,14 @@ license = "MIT"
 repository = "https://github.com/iced-rs/iced"
 
 [features]
+canvas = ["lyon_path"]
 debug = []
 
 [dependencies]
 twox-hash = { version = "1.5", default-features = false }
 unicode-segmentation = "1.6"
 num-traits = "0.2"
+thiserror = "1"
 
 [dependencies.iced_core]
 version = "0.8"
@@ -27,3 +29,7 @@ features = ["thread-pool"]
 [dependencies.iced_style]
 version = "0.7"
 path = "../style"
+
+[dependencies.lyon_path]
+version = "1"
+optional = true
diff --git a/native/src/lib.rs b/native/src/lib.rs
index 27b6fc0d..c98827e7 100644
--- a/native/src/lib.rs
+++ b/native/src/lib.rs
@@ -33,7 +33,7 @@
 )]
 #![deny(
     missing_debug_implementations,
-    missing_docs,
+    //missing_docs,
     unused_results,
     clippy::extra_unused_lifetimes,
     clippy::from_over_into,
@@ -79,6 +79,7 @@ mod debug;
 mod debug;
 
 pub use iced_core::alignment;
+pub use iced_core::gradient;
 pub use iced_core::time;
 pub use iced_core::{
     color, Alignment, Background, Color, ContentFit, Length, Padding, Pixels,
@@ -97,6 +98,7 @@ pub use debug::Debug;
 pub use element::Element;
 pub use event::Event;
 pub use font::Font;
+pub use gradient::Gradient;
 pub use hasher::Hasher;
 pub use layout::Layout;
 pub use overlay::Overlay;
diff --git a/native/src/widget.rs b/native/src/widget.rs
index 2b3ca7be..27330894 100644
--- a/native/src/widget.rs
+++ b/native/src/widget.rs
@@ -83,6 +83,22 @@ pub use tree::Tree;
 #[doc(no_inline)]
 pub use vertical_slider::VerticalSlider;
 
+#[cfg(feature = "canvas")]
+#[cfg_attr(docsrs, doc(cfg(feature = "canvas")))]
+pub mod canvas;
+
+#[cfg(feature = "canvas")]
+#[doc(no_inline)]
+pub use canvas::Canvas;
+
+#[cfg(feature = "qr_code")]
+#[cfg_attr(docsrs, doc(cfg(feature = "qr_code")))]
+pub mod qr_code;
+
+#[cfg(feature = "qr_code")]
+#[doc(no_inline)]
+pub use qr_code::QRCode;
+
 pub use action::Action;
 pub use id::Id;
 pub use operation::Operation;
diff --git a/native/src/widget/canvas.rs b/native/src/widget/canvas.rs
new file mode 100644
index 00000000..8a9addd2
--- /dev/null
+++ b/native/src/widget/canvas.rs
@@ -0,0 +1,259 @@
+//! 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!
+pub mod event;
+pub mod fill;
+pub mod path;
+pub mod stroke;
+
+mod cursor;
+mod program;
+mod style;
+mod text;
+
+pub use crate::gradient::{self, Gradient};
+pub use cursor::Cursor;
+pub use event::Event;
+pub use fill::Fill;
+pub use path::Path;
+pub use program::Program;
+pub use stroke::{LineCap, LineDash, LineJoin, Stroke};
+pub use style::Style;
+pub use text::Text;
+
+use crate::layout::{self, Layout};
+use crate::mouse;
+use crate::renderer;
+use crate::widget::tree::{self, Tree};
+use crate::{
+    Clipboard, Element, Length, Point, Rectangle, Shell, Size, Vector, Widget,
+};
+
+use std::marker::PhantomData;
+
+/// A widget capable of drawing 2D graphics.
+///
+/// ## 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 mod widget {
+/// #         pub use iced_graphics::widget::canvas;
+/// #     }
+/// #     pub use iced_native::{Color, Rectangle, Theme};
+/// # }
+/// use iced::widget::canvas::{self, Canvas, Cursor, Fill, Frame, Geometry, Path, Program};
+/// use iced::{Color, Rectangle, Theme};
+///
+/// // 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 {
+///     type State = ();
+///
+///     fn draw(&self, _state: &(), _theme: &Theme, 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, 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, Renderer, P>
+where
+    Renderer: self::Renderer,
+    P: Program<Message, Renderer>,
+{
+    width: Length,
+    height: Length,
+    program: P,
+    message_: PhantomData<Message>,
+    theme_: PhantomData<Renderer>,
+}
+
+impl<Message, Renderer, P> Canvas<Message, Renderer, P>
+where
+    Renderer: self::Renderer,
+    P: Program<Message, Renderer>,
+{
+    const DEFAULT_SIZE: f32 = 100.0;
+
+    /// Creates a new [`Canvas`].
+    pub fn new(program: P) -> Self {
+        Canvas {
+            width: Length::Fixed(Self::DEFAULT_SIZE),
+            height: Length::Fixed(Self::DEFAULT_SIZE),
+            program,
+            message_: PhantomData,
+            theme_: PhantomData,
+        }
+    }
+
+    /// Sets the width of the [`Canvas`].
+    pub fn width(mut self, width: impl Into<Length>) -> Self {
+        self.width = width.into();
+        self
+    }
+
+    /// Sets the height of the [`Canvas`].
+    pub fn height(mut self, height: impl Into<Length>) -> Self {
+        self.height = height.into();
+        self
+    }
+}
+
+impl<Message, Renderer, P> Widget<Message, Renderer>
+    for Canvas<Message, Renderer, P>
+where
+    Renderer: self::Renderer,
+    P: Program<Message, Renderer>,
+{
+    fn tag(&self) -> tree::Tag {
+        struct Tag<T>(T);
+        tree::Tag::of::<Tag<P::State>>()
+    }
+
+    fn state(&self) -> tree::State {
+        tree::State::new(P::State::default())
+    }
+
+    fn width(&self) -> Length {
+        self.width
+    }
+
+    fn height(&self) -> Length {
+        self.height
+    }
+
+    fn layout(
+        &self,
+        _renderer: &Renderer,
+        limits: &layout::Limits,
+    ) -> layout::Node {
+        let limits = limits.width(self.width).height(self.height);
+        let size = limits.resolve(Size::ZERO);
+
+        layout::Node::new(size)
+    }
+
+    fn on_event(
+        &mut self,
+        tree: &mut Tree,
+        event: crate::Event,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        _renderer: &Renderer,
+        _clipboard: &mut dyn Clipboard,
+        shell: &mut Shell<'_, Message>,
+    ) -> event::Status {
+        let bounds = layout.bounds();
+
+        let canvas_event = match event {
+            crate::Event::Mouse(mouse_event) => Some(Event::Mouse(mouse_event)),
+            crate::Event::Touch(touch_event) => Some(Event::Touch(touch_event)),
+            crate::Event::Keyboard(keyboard_event) => {
+                Some(Event::Keyboard(keyboard_event))
+            }
+            _ => None,
+        };
+
+        let cursor = Cursor::from_window_position(cursor_position);
+
+        if let Some(canvas_event) = canvas_event {
+            let state = tree.state.downcast_mut::<P::State>();
+
+            let (event_status, message) =
+                self.program.update(state, canvas_event, bounds, cursor);
+
+            if let Some(message) = message {
+                shell.publish(message);
+            }
+
+            return event_status;
+        }
+
+        event::Status::Ignored
+    }
+
+    fn mouse_interaction(
+        &self,
+        tree: &Tree,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        _viewport: &Rectangle,
+        _renderer: &Renderer,
+    ) -> mouse::Interaction {
+        let bounds = layout.bounds();
+        let cursor = Cursor::from_window_position(cursor_position);
+        let state = tree.state.downcast_ref::<P::State>();
+
+        self.program.mouse_interaction(state, bounds, cursor)
+    }
+
+    fn draw(
+        &self,
+        tree: &Tree,
+        renderer: &mut Renderer,
+        theme: &Renderer::Theme,
+        _style: &renderer::Style,
+        layout: Layout<'_>,
+        cursor_position: Point,
+        _viewport: &Rectangle,
+    ) {
+        let bounds = layout.bounds();
+
+        if bounds.width < 1.0 || bounds.height < 1.0 {
+            return;
+        }
+
+        let cursor = Cursor::from_window_position(cursor_position);
+        let state = tree.state.downcast_ref::<P::State>();
+
+        renderer.with_translation(
+            Vector::new(bounds.x, bounds.y),
+            |renderer| {
+                renderer.draw(
+                    self.program.draw(state, renderer, theme, bounds, cursor),
+                );
+            },
+        );
+    }
+}
+
+impl<'a, Message, Renderer, P> From<Canvas<Message, Renderer, P>>
+    for Element<'a, Message, Renderer>
+where
+    Message: 'a,
+    Renderer: 'a + self::Renderer,
+    P: Program<Message, Renderer> + 'a,
+{
+    fn from(
+        canvas: Canvas<Message, Renderer, P>,
+    ) -> Element<'a, Message, Renderer> {
+        Element::new(canvas)
+    }
+}
+
+pub trait Renderer: crate::Renderer {
+    type Geometry;
+
+    fn draw(&mut self, geometry: Vec<Self::Geometry>);
+}
diff --git a/native/src/widget/canvas/cursor.rs b/native/src/widget/canvas/cursor.rs
new file mode 100644
index 00000000..ef6a7771
--- /dev/null
+++ b/native/src/widget/canvas/cursor.rs
@@ -0,0 +1,64 @@
+use crate::{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.
+    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`.
+    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.
+    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.
+    pub fn is_over(&self, bounds: &Rectangle) -> bool {
+        match self {
+            Cursor::Available(position) => bounds.contains(*position),
+            Cursor::Unavailable => false,
+        }
+    }
+}
diff --git a/native/src/widget/canvas/event.rs b/native/src/widget/canvas/event.rs
new file mode 100644
index 00000000..1d726577
--- /dev/null
+++ b/native/src/widget/canvas/event.rs
@@ -0,0 +1,21 @@
+//! Handle events of a canvas.
+use crate::keyboard;
+use crate::mouse;
+use crate::touch;
+
+pub use crate::event::Status;
+
+/// A [`Canvas`] event.
+///
+/// [`Canvas`]: crate::widget::Canvas
+#[derive(Debug, Clone, Copy, PartialEq)]
+pub enum Event {
+    /// A mouse event.
+    Mouse(mouse::Event),
+
+    /// A touch event.
+    Touch(touch::Event),
+
+    /// A keyboard event.
+    Keyboard(keyboard::Event),
+}
diff --git a/native/src/widget/canvas/fill.rs b/native/src/widget/canvas/fill.rs
new file mode 100644
index 00000000..92b1e47e
--- /dev/null
+++ b/native/src/widget/canvas/fill.rs
@@ -0,0 +1,64 @@
+//! Fill [crate::widget::canvas::Geometry] with a certain style.
+use crate::widget::canvas::Gradient;
+use crate::Color;
+
+pub use crate::widget::canvas::Style;
+
+/// The style used to fill geometry.
+#[derive(Debug, Clone)]
+pub struct Fill {
+    /// The color or gradient of the fill.
+    ///
+    /// By default, it is set to [`Style::Solid`] with [`Color::BLACK`].
+    pub style: Style,
+
+    /// The fill rule defines how to determine what is inside and what is
+    /// outside of a shape.
+    ///
+    /// See the [SVG specification][1] for more details.
+    ///
+    /// By default, it is set to `NonZero`.
+    ///
+    /// [1]: https://www.w3.org/TR/SVG/painting.html#FillRuleProperty
+    pub rule: Rule,
+}
+
+impl Default for Fill {
+    fn default() -> Self {
+        Self {
+            style: Style::Solid(Color::BLACK),
+            rule: Rule::NonZero,
+        }
+    }
+}
+
+impl From<Color> for Fill {
+    fn from(color: Color) -> Fill {
+        Fill {
+            style: Style::Solid(color),
+            ..Fill::default()
+        }
+    }
+}
+
+impl From<Gradient> for Fill {
+    fn from(gradient: Gradient) -> Self {
+        Fill {
+            style: Style::Gradient(gradient),
+            ..Default::default()
+        }
+    }
+}
+
+/// The fill rule defines how to determine what is inside and what is outside of
+/// a shape.
+///
+/// See the [SVG specification][1].
+///
+/// [1]: https://www.w3.org/TR/SVG/painting.html#FillRuleProperty
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+#[allow(missing_docs)]
+pub enum Rule {
+    NonZero,
+    EvenOdd,
+}
diff --git a/native/src/widget/canvas/path.rs b/native/src/widget/canvas/path.rs
new file mode 100644
index 00000000..30c387c5
--- /dev/null
+++ b/native/src/widget/canvas/path.rs
@@ -0,0 +1,67 @@
+//! Build different kinds of 2D shapes.
+pub mod arc;
+
+mod builder;
+
+#[doc(no_inline)]
+pub use arc::Arc;
+pub use builder::Builder;
+
+pub use lyon_path;
+
+use crate::{Point, Size};
+
+/// An immutable set of points that may or may not be connected.
+///
+/// A single [`Path`] can represent different kinds of 2D shapes!
+#[derive(Debug, Clone)]
+pub struct Path {
+    raw: lyon_path::Path,
+}
+
+impl Path {
+    /// Creates a new [`Path`] with the provided closure.
+    ///
+    /// Use the [`Builder`] to configure your [`Path`].
+    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.
+    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`.
+    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.
+    pub fn circle(center: Point, radius: f32) -> Self {
+        Self::new(|p| p.circle(center, radius))
+    }
+
+    #[inline]
+    pub fn raw(&self) -> &lyon_path::Path {
+        &self.raw
+    }
+
+    #[inline]
+    pub fn transform(&self, transform: &lyon_path::math::Transform) -> Path {
+        Path {
+            raw: self.raw.clone().transformed(transform),
+        }
+    }
+}
diff --git a/native/src/widget/canvas/path/arc.rs b/native/src/widget/canvas/path/arc.rs
new file mode 100644
index 00000000..e0747d3e
--- /dev/null
+++ b/native/src/widget/canvas/path/arc.rs
@@ -0,0 +1,42 @@
+//! Build and draw curves.
+use crate::{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`].
+#[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/native/src/widget/canvas/path/builder.rs b/native/src/widget/canvas/path/builder.rs
new file mode 100644
index 00000000..84fda052
--- /dev/null
+++ b/native/src/widget/canvas/path/builder.rs
@@ -0,0 +1,192 @@
+use crate::widget::canvas::path::{arc, Arc, Path};
+use crate::{Point, Size};
+
+use lyon_path::builder::{self, SvgPathBuilder};
+use lyon_path::geom;
+use lyon_path::math;
+
+/// A [`Path`] builder.
+///
+/// Once a [`Path`] is built, it can no longer be mutated.
+#[allow(missing_debug_implementations)]
+pub struct Builder {
+    raw: builder::WithSvg<lyon_path::path::BuilderImpl>,
+}
+
+impl Builder {
+    /// Creates a new [`Builder`].
+    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(math::Point::new(point.x, point.y));
+    }
+
+    /// Connects the last point in the [`Path`] to the given `Point` with a
+    /// straight line.
+    #[inline]
+    pub fn line_to(&mut self, point: Point) {
+        let _ = self.raw.line_to(math::Point::new(point.x, point.y));
+    }
+
+    /// Adds an [`Arc`] to the [`Path`] from `start_angle` to `end_angle` in
+    /// a clockwise direction.
+    #[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.
+    ///
+    /// This essentially draws a straight line segment from the current
+    /// position to `a`, but fits a circular arc of `radius` tangent to that
+    /// segment and tangent to the line between `a` and `b`.
+    ///
+    /// With another `.line_to(b)`, the result will be a path connecting the
+    /// starting point and `b` with straight line segments towards `a` and a
+    /// circular arc smoothing out the corner at `a`.
+    ///
+    /// See [the HTML5 specification of `arcTo`](https://html.spec.whatwg.org/multipage/canvas.html#building-paths:dom-context-2d-arcto)
+    /// for more details and examples.
+    pub fn arc_to(&mut self, a: Point, b: Point, radius: f32) {
+        let start = self.raw.current_position();
+        let mid = math::Point::new(a.x, a.y);
+        let end = math::Point::new(b.x, b.y);
+
+        if start == mid || mid == end || radius == 0.0 {
+            let _ = self.raw.line_to(mid);
+            return;
+        }
+
+        let double_area = start.x * (mid.y - end.y)
+            + mid.x * (end.y - start.y)
+            + end.x * (start.y - mid.y);
+
+        if double_area == 0.0 {
+            let _ = self.raw.line_to(mid);
+            return;
+        }
+
+        let to_start = (start - mid).normalize();
+        let to_end = (end - mid).normalize();
+
+        let inner_angle = to_start.dot(to_end).acos();
+
+        let origin_angle = inner_angle / 2.0;
+
+        let origin_adjacent = radius / origin_angle.tan();
+
+        let arc_start = mid + to_start * origin_adjacent;
+        let arc_end = mid + to_end * origin_adjacent;
+
+        let sweep = to_start.cross(to_end) < 0.0;
+
+        let _ = self.raw.line_to(arc_start);
+
+        self.raw.arc_to(
+            math::Vector::new(radius, radius),
+            math::Angle::radians(0.0),
+            lyon_path::ArcFlags {
+                large_arc: false,
+                sweep,
+            },
+            arc_end,
+        );
+    }
+
+    /// Adds an ellipse to the [`Path`] using a clockwise direction.
+    pub fn ellipse(&mut self, arc: arc::Elliptical) {
+        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 - arc.start_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.
+    #[inline]
+    pub fn bezier_curve_to(
+        &mut self,
+        control_a: Point,
+        control_b: Point,
+        to: Point,
+    ) {
+        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.
+    #[inline]
+    pub fn quadratic_curve_to(&mut self, control: Point, to: Point) {
+        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`.
+    #[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.
+    #[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.
+    #[inline]
+    pub fn close(&mut self) {
+        self.raw.close()
+    }
+
+    /// Builds the [`Path`] of this [`Builder`].
+    #[inline]
+    pub fn build(self) -> Path {
+        Path {
+            raw: self.raw.build(),
+        }
+    }
+}
+
+impl Default for Builder {
+    fn default() -> Self {
+        Self::new()
+    }
+}
diff --git a/native/src/widget/canvas/program.rs b/native/src/widget/canvas/program.rs
new file mode 100644
index 00000000..17a5a137
--- /dev/null
+++ b/native/src/widget/canvas/program.rs
@@ -0,0 +1,108 @@
+use crate::widget::canvas::event::{self, Event};
+use crate::widget::canvas::mouse;
+use crate::widget::canvas::{Cursor, Renderer};
+use crate::Rectangle;
+
+/// The state and logic of a [`Canvas`].
+///
+/// A [`Program`] can mutate internal state and produce messages for an
+/// application.
+///
+/// [`Canvas`]: crate::widget::Canvas
+pub trait Program<Message, Renderer>
+where
+    Renderer: self::Renderer,
+{
+    /// The internal state mutated by the [`Program`].
+    type State: Default + 'static;
+
+    /// Updates the [`State`](Self::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.
+    ///
+    /// [`Canvas`]: crate::widget::Canvas
+    fn update(
+        &self,
+        _state: &mut Self::State,
+        _event: Event,
+        _bounds: Rectangle,
+        _cursor: Cursor,
+    ) -> (event::Status, Option<Message>) {
+        (event::Status::Ignored, 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`].
+    ///
+    /// [`Frame`]: crate::widget::canvas::Frame
+    /// [`Cache`]: crate::widget::canvas::Cache
+    fn draw(
+        &self,
+        state: &Self::State,
+        renderer: &Renderer,
+        theme: &Renderer::Theme,
+        bounds: Rectangle,
+        cursor: Cursor,
+    ) -> Vec<Renderer::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`].
+    ///
+    /// [`Canvas`]: crate::widget::Canvas
+    fn mouse_interaction(
+        &self,
+        _state: &Self::State,
+        _bounds: Rectangle,
+        _cursor: Cursor,
+    ) -> mouse::Interaction {
+        mouse::Interaction::default()
+    }
+}
+
+impl<Message, Renderer, T> Program<Message, Renderer> for &T
+where
+    Renderer: self::Renderer,
+    T: Program<Message, Renderer>,
+{
+    type State = T::State;
+
+    fn update(
+        &self,
+        state: &mut Self::State,
+        event: Event,
+        bounds: Rectangle,
+        cursor: Cursor,
+    ) -> (event::Status, Option<Message>) {
+        T::update(self, state, event, bounds, cursor)
+    }
+
+    fn draw(
+        &self,
+        state: &Self::State,
+        renderer: &Renderer,
+        theme: &Renderer::Theme,
+        bounds: Rectangle,
+        cursor: Cursor,
+    ) -> Vec<Renderer::Geometry> {
+        T::draw(self, state, renderer, theme, bounds, cursor)
+    }
+
+    fn mouse_interaction(
+        &self,
+        state: &Self::State,
+        bounds: Rectangle,
+        cursor: Cursor,
+    ) -> mouse::Interaction {
+        T::mouse_interaction(self, state, bounds, cursor)
+    }
+}
diff --git a/native/src/widget/canvas/stroke.rs b/native/src/widget/canvas/stroke.rs
new file mode 100644
index 00000000..ab4727b2
--- /dev/null
+++ b/native/src/widget/canvas/stroke.rs
@@ -0,0 +1,106 @@
+//! Create lines from a [crate::widget::canvas::Path] and assigns them various attributes/styles.
+pub use crate::widget::canvas::Style;
+
+use crate::Color;
+
+/// The style of a stroke.
+#[derive(Debug, Clone)]
+pub struct Stroke<'a> {
+    /// The color or gradient of the stroke.
+    ///
+    /// By default, it is set to a [`Style::Solid`] with [`Color::BLACK`].
+    pub style: Style,
+    /// 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,
+    /// The dash pattern used when stroking the line.
+    pub line_dash: LineDash<'a>,
+}
+
+impl<'a> Stroke<'a> {
+    /// Sets the color of the [`Stroke`].
+    pub fn with_color(self, color: Color) -> Self {
+        Stroke {
+            style: Style::Solid(color),
+            ..self
+        }
+    }
+
+    /// Sets the width of the [`Stroke`].
+    pub fn with_width(self, width: f32) -> Self {
+        Stroke { width, ..self }
+    }
+
+    /// Sets the [`LineCap`] of the [`Stroke`].
+    pub fn with_line_cap(self, line_cap: LineCap) -> Self {
+        Stroke { line_cap, ..self }
+    }
+
+    /// Sets the [`LineJoin`] of the [`Stroke`].
+    pub fn with_line_join(self, line_join: LineJoin) -> Self {
+        Stroke { line_join, ..self }
+    }
+}
+
+impl<'a> Default for Stroke<'a> {
+    fn default() -> Self {
+        Stroke {
+            style: Style::Solid(Color::BLACK),
+            width: 1.0,
+            line_cap: LineCap::default(),
+            line_join: LineJoin::default(),
+            line_dash: LineDash::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
+    }
+}
+
+/// 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
+    }
+}
+
+/// The dash pattern used when stroking the line.
+#[derive(Debug, Clone, Copy, Default)]
+pub struct LineDash<'a> {
+    /// The alternating lengths of lines and gaps which describe the pattern.
+    pub segments: &'a [f32],
+
+    /// The offset of [`LineDash::segments`] to start the pattern.
+    pub offset: usize,
+}
diff --git a/native/src/widget/canvas/style.rs b/native/src/widget/canvas/style.rs
new file mode 100644
index 00000000..2642fdb8
--- /dev/null
+++ b/native/src/widget/canvas/style.rs
@@ -0,0 +1,24 @@
+use crate::widget::canvas::Gradient;
+use crate::Color;
+
+/// The coloring style of some drawing.
+#[derive(Debug, Clone, PartialEq)]
+pub enum Style {
+    /// A solid [`Color`].
+    Solid(Color),
+
+    /// A [`Gradient`] color.
+    Gradient(Gradient),
+}
+
+impl From<Color> for Style {
+    fn from(color: Color) -> Self {
+        Self::Solid(color)
+    }
+}
+
+impl From<Gradient> for Style {
+    fn from(gradient: Gradient) -> Self {
+        Self::Gradient(gradient)
+    }
+}
diff --git a/native/src/widget/canvas/text.rs b/native/src/widget/canvas/text.rs
new file mode 100644
index 00000000..8c0b2dfb
--- /dev/null
+++ b/native/src/widget/canvas/text.rs
@@ -0,0 +1,57 @@
+use crate::alignment;
+use crate::{Color, Font, Point};
+
+/// 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 of the text relative to the alignment properties.
+    /// By default, this position will be relative to the top-left corner coordinate meaning that
+    /// if the horizontal and vertical alignments are unchanged, this property will tell where the
+    /// top-left corner of the text should be placed.
+    /// By changing the horizontal_alignment and vertical_alignment properties, you are are able to
+    /// change what part of text is placed at this positions.
+    /// For example, when the horizontal_alignment and vertical_alignment are set to Center, the
+    /// center of the text will be placed at the given position NOT the top-left coordinate.
+    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: alignment::Horizontal,
+    /// The vertical alignment of the text
+    pub vertical_alignment: alignment::Vertical,
+}
+
+impl Default for Text {
+    fn default() -> Text {
+        Text {
+            content: String::new(),
+            position: Point::ORIGIN,
+            color: Color::BLACK,
+            size: 16.0,
+            font: Font::SansSerif,
+            horizontal_alignment: alignment::Horizontal::Left,
+            vertical_alignment: alignment::Vertical::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()
+    }
+}