Drawing App in Rust egui — Painter, Strokes & Undo | Learn egui Ep30

5views
00
12:16
T
Taught by Celeste AI - AI Coding Coach
View on YouTube
Description
Build a freehand drawing app in Rust using egui! In this episode, we create a canvas drawing app with allocate_painter for a custom drawing surface, click-and-drag input handling for freehand strokes, line_segment rendering with configurable color and width, stroke history with undo and clear, and a toolbar with color picker and width slider. Student code: https://github.com/GoCelesteAI/egui_drawing_app What You'll Learn: - allocate_painter() for creating a custom drawing canvas - Sense::click_and_drag() for mouse input detection - response.dragged_by(PointerButton::Primary) for drag tracking - response.interact_pointer_pos() for cursor position - painter.line_segment() for rendering line pairs - egui::Stroke::new() for color and width configuration - painter.rect_filled() for dark canvas background - painter.rect_stroke() with StrokeKind::Outside for canvas border - Vec for storing completed stroke history - points.windows(2) for iterating adjacent point pairs - color_edit_button_rgb() for stroke color picker - Slider::new() for brush width control (1.0..=20.0) - Undo with strokes.pop() and Clear with strokes.clear() - add_enabled() for conditional button activation - is_drawing state flag for stroke lifecycle management - Color32::from_rgb() with f32-to-u8 conversion - TopBottomPanel::top for toolbar layout - CentralPanel with full-size canvas - ctx.request_repaint() for smooth drawing - Neo-tree file browsing in a Rust project This is Episode 30 of the "Learn egui in Neovim" series — 36 episodes teaching Rust GUI development with egui, all coded in Neovim with Neo-tree. Chapters: 0:00 Intro 0:12 What We're Building 0:22 Preview: Key Concepts 0:54 Create Project & Dependencies 1:30 main.rs — Window Setup 2:15 app.rs — Stroke Struct 2:50 MyApp Struct & Default 3:30 eframe::App — Toolbar Panel 4:30 Color Picker & Width Slider 5:15 Stroke Counter & Undo/Clear Buttons 6:00 Central Panel — allocate_painter 6:45 Canvas Background & Border 7:15 Drag Input Handling 8:15 Saving Completed Strokes 9:00 Drawing Completed Strokes 9:30 Drawing Current Stroke 10:00 Save & Review Code 10:30 cargo build 11:00 Neo-tree Browse 11:30 App Demo 12:30 Recap 13:10 Next Episode Tags: rust, egui, drawing app, gui, tutorial, neovim, neo-tree, eframe, painter, canvas, stroke, line_segment, allocate_painter, drag, freehand, undo, color picker, slider, sense, click_and_drag, custom painting, coding, programming, learn rust, rust gui, desktop app Hashtags: #rust #egui #drawingapp #gui #neovim #rustlang #coding #tutorial

Tags

rusteguidrawing appguitutorialneovimneo-treeeframepaintercanvasstrokeline_segmentallocate_painterdragfreehand
Back to tutorials

Duration

12:16

Published

March 21, 2026

Added to Codegiz

March 23, 2026

Open in YouTube