Search⌘ K
AI Features
Home
Courses
Computer Graphics in Python and Pycairo

Creating an Image with Pycairo

Explore how to create simple images using Pycairo by setting up an image surface and drawing shapes. Learn to define paths, use coordinates effectively, and fill shapes with color for basic vector graphics creation.

We'll cover the following...

Simple image with Pycairo

Every image is divided into two parts:

  • Surface (canvas)
  • Drawing

Let’s first look at the following slideshow to see how it works. First, we will make a 600 by 400 pixel surface. Then, we will make a red rectangle with a length of 240 pixels and a width of 100 pixels. We want this rectangle to start at 150 pixels from the x-axis, and 100 pixels from the y-axis.

Here is the step-by-step guide for making a very simple PNG image, containing a single rectangle, using Pycairo.

Setting up a surface with Pycairo

First, we will create a surface to draw on. A surface is an object where we create our image. We can think of it as similar to an artist’s canvas.

Python 3.8
import cairo
# Set up surface
surface = cairo.ImageSurface(cairo.FORMAT_RGB24, 600, 400)
ctx = cairo.Context(surface)
ctx.set_source_rgb(0.8, 0.8, 0.8)
ctx.paint()

Let’s look at its line-by-line explanation.

Line 4:

  • When we create the surface, we are also specifying the type of output.
  • An ImageSurface will create a PNG image as output. There are other types of surfaces that create different output formats, for example SVG and PDF.
  • We set the format to FORMAT_RGB24, which is a normal RGB image. We set the output image’s size to 600 by 400 pixels

Line 5:

  • This is used to create a context. A context is a tool we use to draw on the surface.
  • We can think of it as being analogous to a pen that is used to draw. However, this is a somewhat weak analogy.

Line 6-7:

  • We will fill the entire surface with a light grey color, using the paint function.

Drawing the image

Drawing in Pycairo is a two-step process. First, we define a path. A path is an abstract description of what we intend to draw. The second step is to draw the shape described by the path.

Python 3.8
import cairo
# Set up surface
surface = cairo.ImageSurface(cairo.FORMAT_RGB24, 600, 400)
ctx = cairo.Context(surface)
ctx.set_source_rgb(0.8, 0.8, 0.8)
ctx.paint()
# Draw the image
ctx.rectangle(150, 100, 100, 240)
ctx.set_source_rgb(1, 0, 0)
ctx.fill()

Let’s look at its line-by-line explanation.

Line 10:

  • The rectangle(x,y,width,height) function adds a rectangle shape to the path.
  • It doesn’t draw a rectangle. Instead, it adds it to the plan of what we are intending to draw.
  • It specifies a rectangle placed at a position (x, y), with a certain width and height. Our code will place a rectangle at the (150, 100) position, with a width of 100 pixels and a height of 240 pixels

Note: We will explain how coordinates work, shortly.

Line 11-12:

  • Using set_source_rgb, set the color to (1, 0, 0), which is a bright red.
  • Call the fill function. This function looks at the path we have defined and fills it with the color we previously selected. The fill function is what actually draws the shape which, in this case, is a rectangle.

Pycairo coordinates system

The Pycairo coordinate system works as follows:

  • It uses a simple coordinate system based on the size of the output image we are creating (specified by the cairo.ImageSurface call).
  • Coordinates have their origin at the top left of the page.

In the example below:

  • The image is 600 by 400 pixels in size, so the coordinate space is also 600 by 400 units.
  • The image starts at 100 pixels from the x-axis and at 150 pixels from the y-axis.
  • From this starting point, the shape of the rectangle is drawn. It is 100 pixels in width and 240 pixels in height.