Add drawing bitmap images to Canvas #4047

corranwebster · 2026-01-02T17:13:56Z

This adds a draw_image method to the Canvas class, along with a DrawImage subclass of DrawingObject that adds the ability to render an Image into Canvas with the current transforms applied. It currently supports the ability to draw an image at a point, or to draw an image into a destination rectangle, but doesn't currently support the ability to draw a slice out of the source image.

Has tests, and have added image drawing as one of the options in the Canvas example.

Fixes #955.

To Do:

PR Checklist:

All new features have been tested
All new features have been documented
I have read the CONTRIBUTING.md file
I will abide by the code of conduct

Not sure if I need to apply the matrix myself.

…pixels.

… own rect.

corranwebster

Some notes on the implementation.

I think this is ready for review.

cocoa/src/toga_cocoa/libs/core_graphics.py

iOS/src/toga_iOS/libs/core_graphics.py

core/src/toga/widgets/canvas/context.py

HalfWhitt

HECK YES. I am excited about this!

I haven't had a chance to look at this yet as thoroughly as it deserves, but I have a couple of preliminary questions / comments.

core/src/toga/widgets/canvas/context.py

cocoa/src/toga_cocoa/widgets/canvas.py

HalfWhitt · 2026-01-04T02:07:12Z

iOS/src/toga_iOS/widgets/canvas.py

+        # Have an UIImage, need a CGImage
+        cg_image = ui_image.CGImage
+
+        # Quartz is flipped relative to data, so we:


Is this true on iOS as well? I was under the impression that, unlike macOS, iOS always counts from the top left:

The default coordinate system for views in iOS and OS X differ in the orientation of the vertical axis:

OS X. The default coordinate system has its origin at the lower left of the drawing area; positive values extend up and to the right from it. You can programmatically “flip” a view’s coordinate system in OS X.

iOS. The default coordinate system has its origin at the upper left of the drawing area, and positive values extend down and to the right from it. You cannot change the default orientation of a view’s coordinate system in iOS—that is, you cannot “flip” it.

That said, I suppose I can't argue with test results, if this is working...

I think it has to be, given how it's working. I was a bit surprised on Cocoa that I had to flip the image and that the flipped coordinates flag didn't fix that automatically. I expect that something similar is happening on iOS. I think when you did down deep enough you get to Quartz which is very much a bottom-left origin system (which I think comes from PostScript originally!), no matter what you layer on top.

That does make sense... seems safe to file this under "Might be interesting to dig deeper on someday, but it works as intended."

johnzhou721

2 small notes here, from a quick look at this it seems that this is great, however I'm not very familiar with this part of the code.

changes/995.feature.md

cocoa/src/toga_cocoa/libs/core_graphics.py

Co-authored-by: John <johnzhou721@gmail.com>

johnzhou721

I looked through this PR, and nothing's too concerning. But I'm not sufficiently familiar with Canvas -- let's wait for @HalfWhitt's opinion on this.

cocoa/src/toga_cocoa/libs/core_graphics.py

HalfWhitt

Having sat down and looked through this, it looks perfect to me (with the exception of one minor copy-paste error, which I can fix). This is very thorough, thank you!

HalfWhitt · 2026-01-12T00:50:14Z

iOS/src/toga_iOS/widgets/canvas.py

+        # Have an UIImage, need a CGImage
+        cg_image = ui_image.CGImage
+
+        # Quartz is flipped relative to data, so we:


That does make sense... seems safe to file this under "Might be interesting to dig deeper on someday, but it works as intended."

core/tests/widgets/canvas/test_draw_operations.py

corranwebster added 29 commits January 2, 2026 16:17

Initial proof of concept of Canvas.draw_image()

38b071c

Add test for draw image.

0188b2f

Add simple tests, iOS backend.

c60617d

Add to changelog.

d43dc36

Add dummy implementation.

7a708f8

Add core test for drawImage

bae64af

Work in progress.

85f7691

Make draw in rect test more interesting - test transform of image.

1be95d1

Fix core tests.

9105840

Fix coverage.

db97a47

Add Qt implementation of draw_image().

97ba784

Add support for Android (untested).

6e575a7

Add winforms implementation.

62f0ba5

Not sure if I need to apply the matrix myself.

Fixes for Android and windows - see if they work.

4dbf19b

Try some more fixes.

600427f

Implement Gtk backend; various attempted fixes for other backends.

37812a4

Fixes for Gtk, and Winforms, slight tweaking of docstrongs.

116e894

fix for Gtk: try creating the image surface directly from the pixbuf …

49b1a90

…pixels.

The get_pixels() method returns a Python buffer, so more likely to work.

cb76ac7

Use get_rowstride().

d8e3cff

ImageSirface needs a writable buffer, so copy pixels into a bytearray.

66c9804

Remove old code.

3c7a7fe

Need to convert BGR to RGB format in Gtk

08f9d30

Fix typo.

e4ceaeb

Try a completely different approack for Gtk.

d19598f

Try doing transformation before setting the source.

217fb9d

Scaled by inverse of what we need.

ce9a7a7

After transformation, we're essentially just drawing the image in its…

7f77033

… own rect.

Clean-up, update changelog.

1db15db

corranwebster commented Jan 3, 2026

View reviewed changes

cocoa/src/toga_cocoa/libs/core_graphics.py Show resolved Hide resolved

iOS/src/toga_iOS/libs/core_graphics.py Show resolved Hide resolved

core/src/toga/widgets/canvas/context.py Show resolved Hide resolved

corranwebster marked this pull request as ready for review January 3, 2026 11:50

HalfWhitt reviewed Jan 4, 2026

View reviewed changes

johnzhou721 reviewed Jan 4, 2026

View reviewed changes

changes/995.feature.md Outdated Show resolved Hide resolved

cocoa/src/toga_cocoa/libs/core_graphics.py Show resolved Hide resolved

corranwebster and others added 2 commits January 5, 2026 18:29

Update changes/995.feature.md

93a843b

Co-authored-by: John <johnzhou721@gmail.com>

Make the image flip a little clearer in iOS and Cocoa backends.

e10ff4f

corranwebster requested review from HalfWhitt and johnzhou721 January 5, 2026 19:13

johnzhou721 approved these changes Jan 5, 2026

View reviewed changes

cocoa/src/toga_cocoa/libs/core_graphics.py Show resolved Hide resolved

HalfWhitt approved these changes Jan 12, 2026

View reviewed changes

Fix test docstring

23d1157

HalfWhitt merged commit 3a4a810 into beeware:main Jan 12, 2026
41 checks passed

Uh oh!

Add drawing bitmap images to Canvas #4047

Add drawing bitmap images to Canvas #4047

Uh oh!

Conversation

corranwebster commented Jan 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist:

Uh oh!

corranwebster left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

HalfWhitt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

HalfWhitt Jan 4, 2026

Choose a reason for hiding this comment

Uh oh!

corranwebster Jan 5, 2026

Choose a reason for hiding this comment

Uh oh!

HalfWhitt Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

johnzhou721 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

johnzhou721 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

HalfWhitt left a comment

Choose a reason for hiding this comment

Uh oh!

HalfWhitt Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

corranwebster commented Jan 2, 2026 •

edited

Loading