Tutorial: Hello World Canvas

Let's build a simple Zaplib application that draws "Hello, World!" on the screen.

First we create a Cargo.toml file with the Zaplib dependency:

name = "tutorial_hello_world_canvas"
version = "0.0.1"
edition = "2021"

zaplib = { path="../../main" }

In src/main.rs, we need to define a main app to draw from:

struct App {

impl App {
    fn new(cx: &mut Cx) -> Self {

    fn handle(&mut self, cx: &mut Cx, event: &mut Event) {

    fn draw(&mut self, cx: &mut Cx) {


Just like in Tutorial: Hello World Console, the App implements 3 main functions: new, handle, and draw. Next we create a window with some text in the draw function:

    fn draw(&mut self, cx: &mut Cx) {
        self.pass.begin_pass(cx, Vec4::color("0"));
        self.view.begin_view(cx, LayoutSize::FILL);

        cx.begin_padding_box(Padding::vh(50., 50.));
        TextIns::draw_walk(cx, "Hello, World!", &TextInsProps::default());

  • window refers to the main desktop or browser window.
  • pass refers to our rendering context. We specify a black background — we can use any hex color here.
  • view refers to our layout. We provide a FILL layout, which translates to 100% of the available width and height.
  • begin_padding_box adds a padding so that text doesn't overlap with the native window buttons.
  • TextIns is Zaplib's implementation for text rendering. We pass in our desired string and any formatting properties. We'll stick with default formatting for now.

Add the relevant state to App:

struct App {
    window: Window,
    pass: Pass,
    view: View,

You can run this full example with Cargo:

cargo run -p tutorial_hello_world_canvas

Congratulations! You just did your first rendering in Zaplib. In the next tutorial we will cover how to do 2D rendering.