image drawing

★★☆☆by Ramon Santamaria (@raysan5)

There is no browser build of this example yet.

Is it the same as C?

Desktop:verified The Zig version renders a final frame that is byte-identical to the C example.
Browser:not checked yet The browser comparison does not cover this example yet.

ZigC (original)

//! raylib [textures] example - image drawing
//!
//! NOTE: Images are loaded in CPU memory (RAM); textures are loaded in GPU memory (VRAM)
//!
//! Zig-API translation of examples/textures/textures_image_drawing.c (raylib 6.2).
//! Example licensed under an unmodified zlib/libpng license.
//! Copyright (c) 2016-2025 Ramon Santamaria (@raysan5)

const rl = @import("raylib");

pub fn main() !void {
    // Initialization
    const screen_width = 800;
    const screen_height = 450;

    rl.initWindow(screen_width, screen_height, "raylib [textures] example - image drawing");
    defer rl.closeWindow(); // Close window and OpenGL context

    // NOTE: Textures MUST be loaded after Window initialization (OpenGL context is required)

    var cat = try rl.loadImage("resources/cat.png"); // Load image in CPU memory (RAM)
    rl.imageCrop(&cat, .{ .x = 100, .y = 10, .width = 280, .height = 380 }); // Crop an image piece
    rl.imageFlipHorizontal(&cat); // Flip cropped image horizontally
    rl.imageResize(&cat, 150, 200); // Resize flipped-cropped image

    var parrots = try rl.loadImage("resources/parrots.png"); // Load image in CPU memory (RAM)

    // Draw one image over the other with a scaling of 1.5f
    const cat_width: f32 = @floatFromInt(cat.width);
    const cat_height: f32 = @floatFromInt(cat.height);
    rl.imageDrawImagePro(
        &parrots,
        cat,
        .{ .x = 0, .y = 0, .width = cat_width, .height = cat_height },
        .{ .x = 30, .y = 40, .width = cat_width * 1.5, .height = cat_height * 1.5 },
        .{ .x = 0, .y = 0 },
        0.0,
        .white,
    );
    // Crop resulting image
    rl.imageCrop(&parrots, .{
        .x = 0,
        .y = 50,
        .width = @floatFromInt(parrots.width),
        .height = @as(f32, @floatFromInt(parrots.height)) - 100,
    });

    // Draw on the image with a few image draw methods
    rl.imageDrawPixel(&parrots, 10, 10, .ray_white);
    rl.imageDrawCircleLines(&parrots, 10, 10, 5, .ray_white);
    rl.imageDrawRectangle(&parrots, 5, 20, 10, 10, .ray_white);

    rl.unloadImage(cat); // Unload image from RAM

    // Load custom font for drawing on image
    const font = try rl.loadFont("resources/custom_jupiter_crash.png");

    // Draw over image using custom font
    rl.imageDrawTextEx(&parrots, font, "PARROTS & CAT", .{ .x = 300, .y = 230 }, @floatFromInt(font.baseSize), -2, .white);

    rl.unloadFont(font); // Unload custom font (already drawn used on image)

    const texture = try rl.loadTextureFromImage(parrots); // Image converted to texture, uploaded to GPU memory (VRAM)
    defer rl.unloadTexture(texture);
    rl.unloadImage(parrots); // Once image has been converted to texture and uploaded to VRAM, it can be unloaded from RAM

    rl.setTargetFPS(60);

    // Main game loop
    while (!rl.windowShouldClose()) { // Detect window close button or ESC key
        // Draw
        rl.beginDrawing();
        defer rl.endDrawing();

        rl.clearBackground(.ray_white);

        const x = screen_width / 2 - @divTrunc(texture.width, 2);
        const y = screen_height / 2 - @divTrunc(texture.height, 2) - 40;
        rl.drawTexture(texture, x, y, .white);
        rl.drawRectangleLines(x, y, texture.width, texture.height, .dark_gray);

        rl.drawText("We are drawing only one texture from various images composed!", 240, 350, 10, .dark_gray);
        rl.drawText("Source images have been cropped, scaled, flipped and copied one over the other.", 190, 370, 10, .dark_gray);
    }
}

/*******************************************************************************************
*
*   raylib [textures] example - image drawing
*
*   Example complexity rating: [★★☆☆] 2/4
*
*   NOTE: Images are loaded in CPU memory (RAM); textures are loaded in GPU memory (VRAM)
*
*   Example originally created with raylib 1.4, last time updated with raylib 1.4
*
*   Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
*   BSD-like license that allows static linking with closed source software
*
*   Copyright (c) 2016-2025 Ramon Santamaria (@raysan5)
*
********************************************************************************************/

#include "raylib.h"

//------------------------------------------------------------------------------------
// Program main entry point
//------------------------------------------------------------------------------------
int main(void)
{
    // Initialization
    //--------------------------------------------------------------------------------------
    const int screenWidth = 800;
    const int screenHeight = 450;

    InitWindow(screenWidth, screenHeight, "raylib [textures] example - image drawing");

    // NOTE: Textures MUST be loaded after Window initialization (OpenGL context is required)

    Image cat = LoadImage("resources/cat.png");             // Load image in CPU memory (RAM)
    ImageCrop(&cat, (Rectangle){ 100, 10, 280, 380 });      // Crop an image piece
    ImageFlipHorizontal(&cat);                              // Flip cropped image horizontally
    ImageResize(&cat, 150, 200);                            // Resize flipped-cropped image

    Image parrots = LoadImage("resources/parrots.png");     // Load image in CPU memory (RAM)

    // Draw one image over the other with a scaling of 1.5f
    ImageDrawImagePro(&parrots, cat, (Rectangle){ 0, 0, (float)cat.width, (float)cat.height }, 
        (Rectangle){ 30, 40, cat.width*1.5f, cat.height*1.5f }, (Vector2){ 0 }, 0.0f, WHITE);
    ImageCrop(&parrots, (Rectangle){ 0, 50, (float)parrots.width, (float)parrots.height - 100 }); // Crop resulting image

    // Draw on the image with a few image draw methods
    ImageDrawPixel(&parrots, 10, 10, RAYWHITE);
    ImageDrawCircleLines(&parrots, 10, 10, 5, RAYWHITE);
    ImageDrawRectangle(&parrots, 5, 20, 10, 10, RAYWHITE);

    UnloadImage(cat);       // Unload image from RAM

    // Load custom font for drawing on image
    Font font = LoadFont("resources/custom_jupiter_crash.png");

    // Draw over image using custom font
    ImageDrawTextEx(&parrots, font, "PARROTS & CAT", (Vector2){ 300, 230 }, (float)font.baseSize, -2, WHITE);

    UnloadFont(font);       // Unload custom font (already drawn used on image)

    Texture2D texture = LoadTextureFromImage(parrots);      // Image converted to texture, uploaded to GPU memory (VRAM)
    UnloadImage(parrots);   // Once image has been converted to texture and uploaded to VRAM, it can be unloaded from RAM

    SetTargetFPS(60);
    //---------------------------------------------------------------------------------------

    // Main game loop
    while (!WindowShouldClose())    // Detect window close button or ESC key
    {
        // Update
        //----------------------------------------------------------------------------------
        // TODO: Update your variables here
        //----------------------------------------------------------------------------------

        // Draw
        //----------------------------------------------------------------------------------
        BeginDrawing();

            ClearBackground(RAYWHITE);

            DrawTexture(texture, screenWidth/2 - texture.width/2, screenHeight/2 - texture.height/2 - 40, WHITE);
            DrawRectangleLines(screenWidth/2 - texture.width/2, screenHeight/2 - texture.height/2 - 40, texture.width, texture.height, DARKGRAY);

            DrawText("We are drawing only one texture from various images composed!", 240, 350, 10, DARKGRAY);
            DrawText("Source images have been cropped, scaled, flipped and copied one over the other.", 190, 370, 10, DARKGRAY);

        EndDrawing();
        //----------------------------------------------------------------------------------
    }

    // De-Initialization
    //--------------------------------------------------------------------------------------
    UnloadTexture(texture);       // Texture unloading

    CloseWindow();                // Close window and OpenGL context
    //--------------------------------------------------------------------------------------

    return 0;
}

From raylib 6.2. The original on GitHub.