1297819 - canvas drawImage has to be called twice before it works

Status: RESOLVED INVALID

(Firefox :: Untriaged, defect)

Description

[michael.anderson]

Attachment: Small example.

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID: 20160823004001

Steps to reproduce:

1. Create input with type = file
2. select an image
3. create filereader
4. create onloadend event on the filereader
5. read the image with the filereader
6. convert it to base64
7. create image with base64 encode url
8. draw the image on the canvas (doesn't work)
9. set a timeout that calls drawImage (does work)
10. call canvas.toDataURL('image/png') and make an image from that


Actual results:

the drawImage in step 8 doesn't work, but if you call it a second time in a timeout function it does work. If you just call it twice in a row, it doesn't work.


Expected results:

I expect the first drawImage to work.

Comment 1

[michael.anderson]

Ok, I think I understand my problem. When I create the Image, I have to put the canvas stuff inside the onload event of the new image.