[Interest] QML Canvas - imagedata and context setup

Francis Herne francis_herne at yahoo.co.uk
Sat Sep 19 18:24:14 CEST 2015

For a couple of days now, I've been trying to use QML Canvas in my application.

Initially I ran into 'bugs' with tiling mode (not only is it completely broken 
for any usage, according to a dev on IRC it always has been - yet it's 
recommended for some purposes in the docs). http://i.imgur.com/MqfzSoM.png

Having given up on that, I can't find a way to reliably create and use 
CanvasImageData objects. The image URL has to be 'loaded' first with 
Canvas::loadImage(), then the object actually created with 

My first problem is that Canvas::loadImage() is asynchronous, so for an unknown 
time after calling it it's not possible to create the data object. The docs 
suggest using the onImageLoaded handler for that, but:

 - It doesn't specify _which_ image was loaded, so I have to try to check every 
image that I might have been trying to load. Annoying but minor.

 - There's no guarantee that the Canvas is even available when the signal is 
emitted. So I get "QML NewCanvas: Unable to use getContext() at this time, 
please wait for available: true", or a null context. Looping for the context to 
become available just causes a hang. Not trying to create the image object 
obviously leaves said object uncreated.

Even when that happens to work, I just get more trouble:

 - There's also no guarantee that the context can be obtained before PAINT 
EVENTS are received. This seems utterly ridiculous to me - the sole example 
code for Context2D in the docs reads:
     var ctx = canvas.getContext('2d');
yet this will actually fail a noticeable proportion of the time. As before, 
looping just causes a hang. There's no return status from onPaint, so being 
unable to draw anything results in blank bits of canvas.

 - Same for image loading - images might not have finished loading, so 
drawImage() has nothing to draw. I can't find a way to wait for this either.

Can anyone advise how I can use this API without all the race conditions?
So far I haven't even managed "load an image and draw it in the corner of the 
canvas", so an example for that would be really useful.

Thanks in advance for any suggestions,
Francis Herne

More information about the Interest mailing list