pyCairo: How to resize and position an image?

Question

Based on the question Create PDF with (resized) PNG images using Pycairo - rescaling Surface issue I have attempted to create code that rescales and places an image at a specific position, as shown in the code below (in this case, for example, the images should appear "over" the underlying rectangles). However, I cannot seem to get the image to appear at the correct location(s).

I'd appreciate knowing what I must change, in order to both scale and position an image correctly.

import cairo
if not cairo.HAS_PDF_SURFACE:
    raise SystemExit('cairo was not compiled with PDF support')


def draw_image(ctx, image, top, left, height, width):
    """Draw a scaled image on a given context."""
    image_surface = cairo.ImageSurface.create_from_png(image)
    # calculate proportional scaling
    img_height = image_surface.get_height()
    img_width = image_surface.get_width()
    width_ratio = float(width) / float(img_width)
    height_ratio = float(height) / float(img_height)
    scale_xy = min(height_ratio, width_ratio)
    # scale image and add it
    ctx.save()
    ctx.scale(scale_xy, scale_xy)
    ctx.translate(left, top)
    ctx.set_source_surface(image_surface)

    ctx.paint()
    ctx.restore()


def draw_box(ctx, left, top, width, height):
    """Draw a box on a given context."""
    ctx.rectangle(left, top, width, height)
    ctx.set_source_rgb(1, 1, 1)
    ctx.fill()
    ctx.rectangle(left, top, width, height)
    ctx.set_source_rgb(0, 0, 0)
    ctx.stroke()


# A4 Page (in points)
surface = cairo.PDFSurface("box.pdf", 595, 842)
context = cairo.Context(surface)
# sizes (in points)
height = 250
width = 180
margin = 20
# draw boxes
draw_box(context, margin, margin, width, height)
draw_box(context, margin + width, margin + height, width, height)
# draw images - SHOULD be superimposed over rectangles, but are NOT
image = "hello.png"
draw_image(context, image, margin, margin, height, width)
draw_image(context, image, margin + height, margin + width, height, width)

Answer 1

Switch the order of scale and translate. Translate first, then scale.