Cairo: The 2D Graphics Drawing Tool in C Language

Hello everyone! Today I want to introduce you to a super powerful C graphics library – Cairo. It is not only the cornerstone of the graphics systems in Linux and macOS, but also used in the rendering engines of browsers like Firefox and Chrome. Whether drawing simple lines and shapes, or creating complex user interfaces, Cairo can handle it with ease!

Getting to Know Cairo

Cairo is an open-source 2D graphics library that provides a very rich API for drawing vector graphics. Speaking of vector graphics, we can understand it as shapes described by mathematical formulas that do not become blurry regardless of how much they are enlarged.

Let’s take a look at the most basic Hello World code:

#include <cairo.h>
#include <cairo-pdf.h>

int main() {
    // Create a PDF surface
    cairo_surface_t *surface = cairo_pdf_surface_create("hello.pdf", 500, 500);
    cairo_t *cr = cairo_create(surface);

    // Set font
    cairo_select_font_face(cr, "Sans", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD);
    cairo_set_font_size(cr, 40.0);

    // Draw text
    cairo_move_to(cr, 50.0, 50.0);
    cairo_show_text(cr, "Hello, Cairo!");

    // Clean up resources
    cairo_destroy(cr);
    cairo_surface_destroy(surface);

    return 0;
}

Tip: When compiling, you need to link the Cairo library, you can use gcc -o hello main.c $(pkg-config --cflags --libs cairo)

Drawing Basic Shapes

The drawing model of Cairo is particularly interesting; it’s like painting: first choose the brush (set color, line width), then determine the starting point, and start drawing lines or shapes.

Let’s draw a colorful smiley face:

// Set color and line width
cairo_set_source_rgb(cr, 1.0, 0.8, 0.0);  // Yellow
cairo_set_line_width(cr, 2.0);

// Draw face
cairo_arc(cr, 250, 250, 100, 0, 2 * M_PI);
cairo_fill_preserve();
cairo_stroke();

// Draw eyes
cairo_set_source_rgb(cr, 0, 0, 0);  // Black
cairo_arc(cr, 200, 230, 10, 0, 2 * M_PI);
cairo_fill();
cairo_arc(cr, 300, 230, 10, 0, 2 * M_PI);
cairo_fill();

// Draw smile
cairo_arc(cr, 250, 250, 60, 0.2 * M_PI, 0.8 * M_PI);
cairo_stroke();

Gradients and Patterns

Cairo can not only draw solid color shapes but also create super cool gradient effects:

// Create linear gradient
cairo_pattern_t *pattern = cairo_pattern_create_linear(0, 0, 400, 400);
cairo_pattern_add_color_stop_rgb(pattern, 0, 1, 0, 0);    // Red
cairo_pattern_add_color_stop_rgb(pattern, 0.5, 0, 1, 0);  // Green
cairo_pattern_add_color_stop_rgb(pattern, 1, 0, 0, 1);    // Blue

// Fill rectangle with gradient
cairo_set_source(cr, pattern);
cairo_rectangle(cr, 0, 0, 400, 400);
cairo_fill();

cairo_pattern_destroy(pattern);

Note: Remember to release the pattern in time, otherwise it will cause memory leaks!

Transformations and State Saving

Sometimes we need to rotate or scale shapes, and Cairo provides powerful transformation functions:

// Save current state
cairo_save(cr);

// Move the origin of the coordinate system to the center
cairo_translate(cr, 250, 250);
// Rotate 45 degrees
cairo_rotate(cr, M_PI / 4);

// Draw a square
cairo_rectangle(cr, -50, -50, 100, 100);
cairo_set_source_rgb(cr, 0, 0.7, 0.9);
cairo_fill();

// Restore previous state
cairo_restore(cr);

Practical Exercise

Try to see if you can use Cairo to draw a simple clock? Hint: You can use cairo_arc() to draw the dial, and cairo_rotate() and cairo_line_to() to draw the hands!

Friends, today’s journey of learning C language ends here! The functions of Cairo are far more than these, if you are interested, you can take a look at the official documentation. Remember to code, and feel free to ask me in the comments if you have any questions. I wish everyone happy learning and continuous improvement in C language!