Cairo gaussian blur for shadows

I wanted to create some shadows for my cairo drawings, like in

http://ssalewski.de/PetEd.html.en

One method is gaussian blur – it never made it into cairo, but there is some c example code in

https://www.cairographics.org/cookbook/blur.c/

I tested it with https://www.cairographics.org/FAQ/#minimal_C_program

Here is the code:

// https://www.cairographics.org/FAQ/#minimal_C_program
// https://www.cairographics.org/cookbook/blur.c/
// cc -o hello `pkg-config --cflags --libs cairo` -lm hello.c
#include <cairo.h>
#include <math.h>
#include <stdint.h>

#define ARRAY_LENGTH(a) (sizeof (a) / sizeof (a)[0])

/* Performs a simple 2D Gaussian blur of radius @radius on surface @surface. */
void
blur_image_surface (cairo_surface_t *surface, int radius)
{
    cairo_surface_t *tmp;
    int width, height;
    int src_stride, dst_stride;
    int x, y, z, w;
    uint8_t *src, *dst;
    uint32_t *s, *d, a, p;
    int i, j, k;
    uint8_t kernel[17];
    const int size = ARRAY_LENGTH (kernel);
    const int half = size / 2;

    if (cairo_surface_status (surface))
    return;

    width = cairo_image_surface_get_width (surface);
    height = cairo_image_surface_get_height (surface);

    switch (cairo_image_surface_get_format (surface)) {
    case CAIRO_FORMAT_A1:
    default:
    /* Don't even think about it! */
    return;

    case CAIRO_FORMAT_A8:
    /* Handle a8 surfaces by effectively unrolling the loops by a
     * factor of 4 - this is safe since we know that stride has to be a
     * multiple of uint32_t. */
    width /= 4;
    break;

    case CAIRO_FORMAT_RGB24:
    case CAIRO_FORMAT_ARGB32:
    break;
    }

    tmp = cairo_image_surface_create (CAIRO_FORMAT_ARGB32, width, height);
    if (cairo_surface_status (tmp))
    return;

    src = cairo_image_surface_get_data (surface);
    src_stride = cairo_image_surface_get_stride (surface);

    dst = cairo_image_surface_get_data (tmp);
    dst_stride = cairo_image_surface_get_stride (tmp);

    a = 0;
    for (i = 0; i < size; i++) {
    double f = i - half;
    a += kernel[i] = exp (- f * f / 30.0) * 80;
    }

    /* Horizontally blur from surface -> tmp */
    for (i = 0; i < height; i++) {
    s = (uint32_t *) (src + i * src_stride);
    d = (uint32_t *) (dst + i * dst_stride);
    for (j = 0; j < width; j++) {
        if (radius < j && j < width - radius) {
        d[j] = s[j];
        continue;
        }

        x = y = z = w = 0;
        for (k = 0; k < size; k++) {
        if (j - half + k < 0 || j - half + k >= width)
            continue;

        p = s[j - half + k];

        x += ((p >> 24) & 0xff) * kernel[k];
        y += ((p >> 16) & 0xff) * kernel[k];
        z += ((p >>  8) & 0xff) * kernel[k];
        w += ((p >>  0) & 0xff) * kernel[k];
        }
        d[j] = (x / a << 24) | (y / a << 16) | (z / a << 8) | w / a;
    }
    }

    /* Then vertically blur from tmp -> surface */
    for (i = 0; i < height; i++) {
    s = (uint32_t *) (dst + i * dst_stride);
    d = (uint32_t *) (src + i * src_stride);
    for (j = 0; j < width; j++) {
        if (radius <= i && i < height - radius) {
        d[j] = s[j];
        continue;
        }

        x = y = z = w = 0;
        for (k = 0; k < size; k++) {
        if (i - half + k < 0 || i - half + k >= height)
            continue;

        s = (uint32_t *) (dst + (i - half + k) * dst_stride);
        p = s[j];

        x += ((p >> 24) & 0xff) * kernel[k];
        y += ((p >> 16) & 0xff) * kernel[k];
        z += ((p >>  8) & 0xff) * kernel[k];
        w += ((p >>  0) & 0xff) * kernel[k];
        }
        d[j] = (x / a << 24) | (y / a << 16) | (z / a << 8) | w / a;
    }
    }

    cairo_surface_destroy (tmp);
    cairo_surface_mark_dirty (surface);
}

int
main (int argc, char *argv[])
{
        cairo_surface_t *surface =
            cairo_image_surface_create (CAIRO_FORMAT_ARGB32, 240, 80);
        cairo_t *cr =
            cairo_create (surface);

        cairo_set_source_rgb (cr, 1.0, 1.0, 1.0);
        cairo_paint(cr);
      
        cairo_select_font_face (cr, "serif", CAIRO_FONT_SLANT_NORMAL, CAIRO_FONT_WEIGHT_BOLD);
        cairo_set_font_size (cr, 32.0);
        cairo_set_source_rgb (cr, 0.0, 0.0, 1.0);
        cairo_move_to (cr, 10.0, 50.0);
        cairo_show_text (cr, "Hello, world");

        cairo_destroy (cr);

        blur_image_surface (surface, 16);

        cairo_surface_write_to_png (surface, "hello.png");
        cairo_surface_destroy (surface);
        return 0;
}

Result is

Can that be the intended result? First and last character is some sort of blurred, but inner not at all. That is not what I have seen from other tools. Well the code is 10 years old, and cairo is very dead now. It is really strange, I was going to port it to Nim, but of course that makes no sense with this result. I have no idea how to debug this, and well I can still create sharp shadows with cairo’ s builtin functions…

Funny fact is, that while the cairo mailing list is nearly dead, there was a post about blur recently:

https://lists.cairographics.org/archives/cairo/2019-October/028924.html

The attached cpp program generates

from

It is some sort of blur, but is it really nice? Well not really important, it was an interesting test, I will use a plain cairo generated shadow for now.

Hi Stefan,

You may want to try the stack blur algorithm developed by Mario Klingemann. A C port of his algorithm, targeting cairo surfaces, is present in lasem sources: https://gitlab.gnome.org/GNOME/lasem/blob/master/src/lsmsvgfiltersurface.c#L150

Thanks for that hint, I will try that one when I have some free time. For now I do my shadows with plain cairo drawing, which looks not bad, and I think that is faster than actual blurring. But I may need blur later and will come back to your suggestion.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.