//! # [Ratatui] Canvas example
//! The latest version of this example is available in the [examples] folder in the repository.
//! Please note that the examples are designed to be run against the `main` branch of the Github
//! repository. This means that you may not be able to compile with the latest release version on
//! crates.io, or the one that you have installed locally.
//! See the [examples readme] for more information on finding examples that match the version of the
//! library you are using.
//! [Ratatui]: https://github.com/ratatui-org/ratatui
//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
#![allow(clippy::wildcard_imports)]
io::{self, stdout, Stdout},
time::{Duration, Instant},
event::{self, Event, KeyCode},
terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
fn main() -> io::Result<()> {
playground: Rect::new(10, 10, 200, 100),
pub fn run() -> io::Result<()> {
let mut terminal = init_terminal()?;
let mut app = Self::new();
let mut last_tick = Instant::now();
let tick_rate = Duration::from_millis(16);
let _ = terminal.draw(|frame| app.ui(frame));
let timeout = tick_rate.saturating_sub(last_tick.elapsed());
if event::poll(timeout)? {
if let Event::Key(key) = event::read()? {
KeyCode::Char('q') => break,
KeyCode::Down | KeyCode::Char('j') => app.y += 1.0,
KeyCode::Up | KeyCode::Char('k') => app.y -= 1.0,
KeyCode::Right | KeyCode::Char('l') => app.x += 1.0,
KeyCode::Left | KeyCode::Char('h') => app.x -= 1.0,
if last_tick.elapsed() >= tick_rate {
last_tick = Instant::now();
// only change marker every 180 ticks (3s) to avoid stroboscopic effect
if (self.tick_count % 180) == 0 {
self.marker = match self.marker {
Marker::Dot => Marker::Braille,
Marker::Braille => Marker::Block,
Marker::Block => Marker::HalfBlock,
Marker::HalfBlock => Marker::Bar,
Marker::Bar => Marker::Dot,
// bounce the ball by flipping the velocity vector
let playground = self.playground;
if ball.x - ball.radius < f64::from(playground.left())
|| ball.x + ball.radius > f64::from(playground.right())
if ball.y - ball.radius < f64::from(playground.top())
|| ball.y + ball.radius > f64::from(playground.bottom())
fn ui(&self, frame: &mut Frame) {
Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)]);
let vertical = Layout::vertical([Constraint::Percentage(50), Constraint::Percentage(50)]);
let [map, right] = horizontal.areas(frame.size());
let [pong, boxes] = vertical.areas(right);
frame.render_widget(self.map_canvas(), map);
frame.render_widget(self.pong_canvas(), pong);
frame.render_widget(self.boxes_canvas(boxes), boxes);
fn map_canvas(&self) -> impl Widget + '_ {
.block(Block::bordered().title("World"))
resolution: MapResolution::High,
ctx.print(self.x, -self.y, "You are here".yellow());
.x_bounds([-180.0, 180.0])
fn pong_canvas(&self) -> impl Widget + '_ {
.block(Block::bordered().title("Pong"))
fn boxes_canvas(&self, area: Rect) -> impl Widget {
let right = f64::from(area.width);
let top = f64::from(area.height).mul_add(2.0, -4.0);
.block(Block::bordered().title("Rects"))
x: f64::from(i * i + 3 * i) / 2.0 + 2.0,
x: f64::from(i * i + 3 * i) / 2.0 + 2.0,
ctx.print(f64::from(i) + 1.0, 0.0, format!("{i}", i = i % 10));
if i % 2 == 0 && i % 10 != 0 {
ctx.print(0.0, f64::from(i), format!("{i}", i = i % 10));
fn init_terminal() -> io::Result<Terminal<CrosstermBackend<Stdout>>> {
stdout().execute(EnterAlternateScreen)?;
Terminal::new(CrosstermBackend::new(stdout()))
fn restore_terminal() -> io::Result<()> {
stdout().execute(LeaveAlternateScreen)?;