LibGfx graphics library

LibGfx provides 2D graphics primitives, image decoding, font rendering, and painting operations for Ladybird’s rendering engine.

LibGfx is Ladybird’s 2D graphics library that handles everything from basic shapes and colors to image decoding, font rendering, and hardware-accelerated painting.

Core graphics primitives

LibGfx provides fundamental types for 2D graphics operations.

Geometric types

// Points
Gfx::IntPoint point { 10, 20 };
Gfx::FloatPoint float_point { 10.5f, 20.5f };

// Rectangles
Gfx::IntRect rect { 0, 0, 100, 50 };
rect.intersected(other_rect);
rect.united(other_rect);

// Sizes
Gfx::IntSize size { 800, 600 };

IntPoint / FloatPoint

2D coordinate positions with integer or floating-point precision

IntRect / FloatRect

Rectangles with position and dimensions, plus intersection/union operations

IntSize / FloatSize

Width and height dimensions

Quad

Arbitrary four-sided polygon

Color

Comprehensive color support with multiple representations:

// RGB colors
auto red = Gfx::Color(255, 0, 0);
auto blue = Gfx::Color::from_rgb(0x0000ff);

// Named colors
auto white = Gfx::Color::White;
auto black = Gfx::Color::Black;

// Alpha transparency
auto translucent = Gfx::Color(255, 0, 0, 128); // 50% opacity

// Color manipulation
auto lighter = color.lightened(1.2f);
auto darker = color.darkened(0.8f);
auto inverted = color.inverted();

LibGfx supports multiple color spaces including sRGB, Display P3, and custom ICC profiles through the ColorSpace class.

Bitmap handling

Bitmap creation and manipulation

Bitmap is the core image storage class:

// Create bitmap
auto bitmap = TRY(Gfx::Bitmap::create(
    Gfx::BitmapFormat::RGBA8888,
    Gfx::IntSize { 800, 600 }
));

// Access pixels
auto color = bitmap->get_pixel(x, y);
bitmap->set_pixel(x, y, Gfx::Color::Red);

// Scanline access for performance
auto* scanline = bitmap->scanline(y);

Supported formats:

• RGBA8888 - 32-bit with alpha
• RGB888 - 24-bit without alpha
• BGRx8888 - 32-bit BGR format
• BGRA8888 - 32-bit BGRA with alpha

ImmutableBitmap

Read-only, shareable bitmap optimized for multi-process usage:

auto immutable = TRY(Gfx::ImmutableBitmap::create(
    move(bitmap)
));

// Can be safely shared across processes

Image decoding

LibGfx includes decoders for common image formats:

PNG

Full PNG support with transparency

JPEG

Baseline and progressive JPEG

GIF

Including animations

WebP

Lossy and lossless

BMP

Windows bitmap format

ICO

Windows icon format

// Load and decode image
auto image_data = TRY(read_file("/path/to/image.png"));
auto decoded = TRY(Gfx::ImageDecoder::try_create(image_data));

if (decoded->is_animated()) {
    auto frame_count = decoded->frame_count();
    for (size_t i = 0; i < frame_count; ++i) {
        auto frame = TRY(decoded->frame(i));
        // Process frame bitmap
    }
}

Font rendering

Font system

LibGfx provides font loading and text rendering:

// Load font
auto font = TRY(Gfx::Font::try_load_from_file("/fonts/Katica.ttf"));

// Get font metrics
int height = font->pixel_size();
int ascent = font->pixel_size_rounded_up();

// Measure text
int width = font->width("Hello, World!"sv);

// Glyph-level access
auto glyph_id = font->glyph_id_for_code_point('A');

Text layout

Complex text shaping and layout:

auto shaped_text = TRY(Gfx::shape_text(
    { 0, 0, 500, 100 },
    "Text to shape"sv,
    font,
    Gfx::TextAlignment::CenterLeft
));

// Access positioned glyphs
for (auto const& glyph : shaped_text.glyphs()) {
    // Render individual glyphs
}

Painting

LibGfx uses Skia for high-performance 2D rendering.

Painter interface

Painter provides the main drawing API:

Gfx::Painter painter { bitmap };

// Basic shapes
painter.fill_rect(rect, Gfx::Color::Red);
painter.draw_rect(rect, Gfx::Color::Black);
painter.draw_line(point1, point2, Gfx::Color::Blue);
painter.draw_ellipse(rect, Gfx::Color::Green);

// Text rendering
painter.draw_text(rect, "Hello"sv, font, 
    Gfx::TextAlignment::Center);

// Image drawing
painter.blit(position, source_bitmap, source_rect);
painter.draw_scaled_bitmap(dest_rect, source_bitmap, source_rect);

Advanced painting

// Gradients
Gfx::LinearGradient gradient;
gradient.add_color_stop(0.0f, Gfx::Color::White);
gradient.add_color_stop(1.0f, Gfx::Color::Black);
painter.fill_rect_with_gradient(rect, gradient);

// Transformations
painter.save();
painter.translate(offset);
painter.rotate(angle);
painter.scale(scale_x, scale_y);
// ... drawing operations ...
painter.restore();

// Clipping
painter.add_clip_rect(clip_rect);
// Only draws within clip region
painter.clear_clip_rect();

Painting operations are not thread-safe. Each painter instance must only be used from a single thread.

Paths and vector graphics

Path construction

Gfx::Path path;

// Build path
path.move_to({ 10, 10 });
path.line_to({ 100, 10 });
path.quadratic_bezier_curve_to(
    { 150, 50 },  // control point
    { 100, 100 }   // end point
);
path.close();

// Fill or stroke
painter.fill_path(path, Gfx::Color::Red);
painter.stroke_path(path, Gfx::Color::Black, 2);

Transformations

AffineTransform provides 2D matrix transformations:

Gfx::AffineTransform transform;
transform.translate(100, 50);
transform.rotate(Math::Pi<float> / 4); // 45 degrees
transform.scale(2.0f, 2.0f);

auto transformed_point = transform.map(original_point);
auto transformed_rect = transform.map(original_rect);

Hardware acceleration

LibGfx supports multiple rendering backends:

Skia backend

Default high-performance backend using Skia:

// PainterSkia automatically uses GPU when available
Gfx::PainterSkia painter { painting_surface };
painter.fill_rect(rect, color);

Vulkan and Metal

Platform-specific GPU acceleration:

• Vulkan: Cross-platform GPU rendering (VulkanContext)
• Metal: macOS/iOS GPU rendering (MetalContext)

LibGfx automatically selects the best available rendering backend based on platform and hardware capabilities.

Filters and effects

Image filtering and effects:

// Apply filters
auto blurred = TRY(Gfx::Filter::apply_blur(bitmap, radius));
auto sharpened = TRY(Gfx::Filter::apply_sharpen(bitmap));

// Color adjustments  
Gfx::Filter::apply_brightness(bitmap, 1.2f);
Gfx::Filter::apply_contrast(bitmap, 1.5f);

System theme integration

// Access system theme colors
auto& theme = Gfx::SystemTheme::current();
auto window_bg = theme.color(Gfx::ColorRole::Window);
auto text_color = theme.color(Gfx::ColorRole::WindowText);

Source location

• Repository: ~/workspace/source/Libraries/LibGfx/
• Key headers: Bitmap.h, Color.h, Painter.h, Rect.h, Point.h, Font.h
• Image formats: LibGfx/ImageFormats/
• Fonts: LibGfx/Font/

LibGfx is designed to be backend-agnostic. While it currently uses Skia as the primary rendering engine, the API abstracts the underlying implementation.