Chapter 10: Mastering Shapes, Paths, Colors, Text, and Images with Cairo in

Chapter 10: Mastering Shapes, Paths, Colors, Text, and Images with Cairo in Vala and GTK 3.0+

10.1 Introduction

This chapter delves into the artistic aspects of programming by exploring how to implement shapes, paths, colors, gradients, text rendering, and image manipulation using Cairo in a Vala and GTK 3.0+ environment. We'll cover each of these elements with practical examples, giving you the tools to enhance your applications with rich graphics.

10.2 Setting Up the Environment

First, ensure you have Cairo and GTK+ 3.0 installed:

sudo apt-get install libcairo2-dev libgtk-3-dev

Create a basic Vala application with a GTK window and a drawing area. This setup will serve as the canvas for all our graphics work.

10.3 Drawing Shapes and Paths

Shapes and paths are fundamental in graphics. Cairo provides various functions to draw common shapes and create custom paths.

Example: Drawing a Rectangle and a Custom Path

private bool draw(Gtk.Widget widget, Cairo.Context cr) {

    // Rectangle

    cr.rectangle(10, 10, 100, 100);

    cr.setSourceRGB(0, 1, 0); // Green color


    // Custom Path

    cr.moveTo(150, 10);

    cr.lineTo(200, 50);

    cr.lineTo(150, 100);


    cr.setSourceRGB(0, 0, 1); // Blue color


    return true;


10.4 Utilizing Colors and Gradients

Colors and gradients add depth and aesthetics to graphics. Cairo allows for linear and radial gradients in addition to solid colors.

Example: Applying a Linear Gradient

private bool draw(Gtk.Widget widget, Cairo.Context cr) {

    var pat = new Cairo.LinearGradient(0, 0, 200, 200);

    pat.addColorStopRGB(0, 1, 1, 0); // Yellow

    pat.addColorStopRGB(1, 0, 0, 1); // Blue

    cr.rectangle(10, 120, 100, 100);



    return true;


10.5 Rendering Text

Text rendering is crucial for displaying data, labels, or decorative elements. Cairo provides functionality to render text in various fonts and styles.

Example: Rendering Text

private bool draw(Gtk.Widget widget, Cairo.Context cr) {

    cr.setSourceRGB(0, 0, 0);

    cr.selectFontFace("Sans", Cairo.FontSlant.NORMAL, Cairo.FontWeight.BOLD);


    cr.moveTo(10, 200);

    cr.showText("Hello, Cairo!");

    return true;


10.6 Loading and Rendering Images

Cairo can also work with images, allowing you to load and render them within your application.

Example: Rendering an Image

private bool draw(Gtk.Widget widget, Cairo.Context cr) {

    var surface = new Cairo.ImageSurface.fromPng("path/to/image.png");

    cr.setSourceSurface(surface, 10, 220);


    return true;


10.7 Combining Elements

In a practical scenario, you'll often combine various elements like shapes, text, and images. Experiment with layering these elements to create complex graphics.

10.8 Best Practices

Resource Management: Always manage your resources carefully, particularly with images and patterns.

Performance Considerations: Be mindful of the performance impact when rendering complex scenes or large images.

10.9 Conclusion

This chapter has provided you with the foundational skills to create visually rich and interactive graphics using Cairo in Vala and GTK 3.0+. By mastering these techniques, you can significantly enhance the user interface and experience of your applications.

Through practical examples and step-by-step instructions, this chapter empowers readers to confidently create and manipulate a variety of graphic elements, paving the way for the development of visually engaging and professional-looking applications in Vala and GTK 3.0+.