Editing Cairo (graphics) (section)

== Software architecture ==
=== Language bindings ===
A library written in one programming language may be used in another language if [[language binding|bindings]] are written; Cairo has a range of bindings for various languages including [[C++]], [[C Sharp (programming language)|C#]] and other [[Common Language Infrastructure|CLI languages]], [[Delphi (programming language)|Delphi]], [[Eiffel (programming language)|Eiffel]], [[Fortran]], [[Factor (programming language)|Factor]], [[Harbour (programming language)|Harbour]], [[Haskell (programming language)|Haskell]], [[Julia (programming language)|Julia]], [[Lua (programming language)|Lua]], [[Perl]], [[PHP]], [[Python (programming language)|Python]], [[Ruby (programming language)|Ruby]], [[Rust (programming language)|Rust]], [[Scheme (programming language)|Scheme]], [[Smalltalk]] and several others like [[Gambas]] (Visual Basic like).<ref>{{cite web |url=http://cairographics.org/bindings/ |title=Cairo Language Bindings |access-date=April 16, 2014}}</ref>

=== Toolkit bindings ===
Since Cairo is only a drawing library, it can be quite useful to integrate it with a graphical user interface toolkit.

* [[FLTK]] has full Cairo support (through <code>--enable-cairo</code> compile switch).
* [[GTK]] began in 2005, with version 2.8, to use Cairo to render the majority of its [[Graphical control element (software)|graphical control elements]], and since version 3.0 all [[rendering (computer graphics)|rendering]] is done through Cairo.
* The Cairo development team maintains up-to-date instructions for rendering surfaces to [[Simple DirectMedia Layer|SDL]].<ref>{{cite web |url=http://cairographics.org/SDL/ |title=SDL |website=Cairo |date=February 17, 2009 |access-date=November 3, 2014}}</ref>

=== Available back-ends ===
Cairo supports output (including [[rasterisation]]) to a number of different [[front and back ends|back-ends]], known as "surfaces" in its code. Back-ends support includes output to the [[X Window System]], via both [[Xlib]] and [[XCB]], [[Graphics Device Interface|Win32 GDI]], [[Quartz Compositor|OS X Quartz Compositor]], the [[BeOS]] API, [[OS/2]], [[OpenGL]] contexts (directly<ref>{{cite web |url=http://lists.cairographics.org/archives/cairo/2009-July/017713.html |title=New OpenGL backend merged |author=Chris Wilson |date=July 22, 2009 |access-date=February 12, 2010}}</ref> and via glitz), local image buffers, [[Portable Network Graphics|PNG]] files, [[Portable document format|PDF]], [[PostScript]], [[DirectFB]] and [[Scalable Vector Graphics|SVG]] files.

There are other back-ends in development targeting the graphics APIs [[OpenVG]],<ref>{{cite web |url=http://lists.freedesktop.org/archives/cairo/2008-January/012833.html |title=Announcing OpenVG backend |author=Øyvind Kolås |date=January 24, 2008 |access-date=February 12, 2010}}</ref> [[Qt (framework)|Qt]],<ref>{{cite web |url=http://blog.vlad1.com/2008/05/06/well-isnt-that-qt/ |title=Well Isn't That Qt |author=Vladimir Vukićević |date=May 6, 2008 |access-date=February 12, 2010 |url-status=dead |archive-url=https://web.archive.org/web/20100409072817/http://blog.vlad1.com/2008/05/06/well-isnt-that-qt/ |archive-date=April 9, 2010}}</ref> [[Skia Graphics Engine|Skia]],<ref>{{cite web |url=http://lists.cairographics.org/archives/cairo/2009-August/018052.html |title=Cool Stuff |author=Chris Wilson |date=August 31, 2009 |access-date=February 12, 2010}}</ref> and Microsoft's [[Direct2D]].<ref>{{cite web |url=http://www.basschouten.com/blog1.php/2009/11/22/direct2d-hardware-rendering-a-browser |title=Direct2D: Hardware Rendering a Browser |author=Bas Schouten |date=November 22, 2009 |access-date=February 12, 2010}}</ref> The BeOS, OS/2, DirectFB and OpenGL backends were dropped in 2022.<ref>{{cite web|url=https://www.phoronix.com/scan.php?page=news_item&px=Cairo-2022-Drops-Old-Code|title=Cairo graphics library drops many old backends|first=Michael|last=Larabel|publisher=Phoronix|date=February 27, 2022|accessdate=June 5, 2022}}</ref><ref>{{cite web |last1=Larabel |first1=Michael |title=Cairo Graphics Library Drops OpenGL Support After A Decade Of Inactivity |url=https://www.phoronix.com/news/Cairo-Drops-OpenGL |website=Phoronix |access-date=7 February 2025 |date=January 29, 2023}}</ref>

=== Drawing model ===
[[File:Cairo's drawing model.svg|thumb|The Cairo drawing model]]
The Cairo drawing model relies on a three-layer model.

Any drawing process takes place in three steps:
# First a mask is created, which includes one or more vector primitives or forms, i.e., circles, squares, [[TrueType]] fonts, [[Bézier curve]]s, etc.
# Then source must be defined, which may be a color, a color gradient, a bitmap or some vector graphics, and from the painted parts of this source a die cut is made with the help of the above defined mask.
# Finally the result is transferred to the destination or surface, which is provided by the back-end for the output.

This constitutes a fundamentally different approach from [[Scalable Vector Graphics]] (SVG), which specifies the color of shapes with [[Cascading Style Sheets]] (CSS) rules.{{Citation needed|date=September 2021}} Whereas Cairo would create a mask of a shape, then make a source for it, and then transfer them onto the surface, an SVG file would simply specify the shape with a <code>style</code> attribute. That said, the models are not incompatible; many SVG renderers use Cairo for heavy lifting.<ref>{{cite web |url=https://github.com/GNOME/librsvg |title=GNOME/librsvg |website=GitHub}}</ref><!-- Well, SVG 1.1. in fact provides a way to achieve similar result via filters. Checkout: https://www.w3.org/TR/SVG11/filters.html -->

==== Example ====
Quite complex "[[Hello world program|Hello world]]" graphics can be drawn with the help of Cairo with only a few lines of [[source code]]:
[[File:Cairo example.svg|thumb|none|180px|SVG picture generated by this example]]
<syntaxhighlight line lang="c">
#include <cairo-svg.h>
#include <stdio.h>

int main(int argc, char **argv) {
    cairo_surface_t *surface = cairo_svg_surface_create("Cairo_example.svg", 100.0, 100.0);
    cairo_t *cr = cairo_create(surface);

    /* Draw the squares in the background */
    for (int x = 0; x < 10; ++x)
        for (int y = 0; y < 10; ++y)
            cairo_rectangle(cr, x * 10.0, y * 10.0, 5, 5);

    cairo_pattern_t *pattern = cairo_pattern_create_radial(50, 50, 5, 50, 50, 50);
    cairo_pattern_add_color_stop_rgb(pattern, 0, 0.75, 0.15, 0.99);
    cairo_pattern_add_color_stop_rgb(pattern, 0.9, 1, 1, 1);

    cairo_set_source(cr, pattern);
    cairo_fill(cr);

    /* Writing in the foreground */
    cairo_set_font_size (cr, 15);
    cairo_select_font_face (cr, "Georgia", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD);
    cairo_set_source_rgb (cr, 0, 0, 0);

    cairo_move_to(cr, 10, 25);
    cairo_show_text(cr, "Hallo");

    cairo_move_to(cr, 10, 75);
    cairo_show_text(cr, "Wikipedia!");

    cairo_destroy(cr);
    cairo_surface_destroy(surface);
}
</syntaxhighlight>