New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 755366 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner:
Last visit > 30 days ago
Closed: Aug 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 1
Type: Bug-Regression



Sign in to add a comment

Canvas .drawImage not drawing images that haven't already been rendered

Reported by s...@stuartpb.com, Aug 14 2017

Issue description

UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36

Steps to reproduce the problem:
1. Create an `img` element that is not part of the document tree (ie. just calling `document.createElement('img')` and not `.appendChild`).
2. Set that image's source to any URL that hasn't already been rendered in this session. Either a remote URL or a Data URL will work here.
3. Draw this image element to a canvas with `.getContext('2d').drawImage`.

See attached testcase (also available as https://testcases.github.io/drawimage-unrendered/index.html ).

What is the expected behavior?
The image should be drawn to the canvas (in the test case, a big blue square should appear).

What went wrong?
Nothing is drawn to the canvas (in the test case, the page is entirely white).

Did this work before? Yes I know this was working around a year ago when https://bugs.chromium.org/p/chromium/issues/detail?id=475009 was closed (note that none of the images in that issue's test case currently render at all).

Does this work in other browsers? Yes

Chrome version: 60.0.3112.90  Channel: n/a
OS Version: 10.0
Flash Version: 

Tested both on my daily driver and current Canary (Version 62.0.3185.0 (Official Build) canary (64-bit)).
 
drawImage-test.html
605 bytes View Download
Components: Blink>Loader
Labels: -Pri-2 Needs-Bisect Pri-1
Status: Untriaged (was: Unconfirmed)
Broken in Chrome 57, works in Chrome 56.
Broken in Firefox 54, Edge 15 and Safari 10.1.

The browsers are pretty much aligned at the moment (regarding this case. Regarding document.body.appendChild(img), they are not aligned - Edge fails at that...), really, but it is still interesting to see when it broke and if intentionally or not.

Test case -
http://jsbin.com/faverawalo/1/edit?html,js,output
Cc: fs...@chromium.org junov@chromium.org
Owner: zakerinasab@chromium.org
Status: Assigned (was: Untriaged)
Status: WontFix (was: Assigned)
As of https://chromium.googlesource.com/chromium/src/+/b6403174c6111ea0947dc7cf8b1eb8a6f9e8546c, the URI image load is async in chromium, which is the spec compliant behavior. Tagging the bug as Won'tFix.

Comment 4 by s...@stuartpb.com, Aug 15 2017

So, for end developers, the solution to this would be to move the
.drawImage call to a "load" event listener on the image after changing
the 'src' attribute?

On Tue, Aug 15, 2017, at 08:51 AM, zakerina… via monorail wrote:

Comment 5 by s...@stuartpb.com, Aug 15 2017

Or, more specifically (if I'm reading the [spec][] right), a "loadend" event?

From what I remember, Chrome used to fire these load events inconsistently (meaning that developers had to both add an event listener *and* check the `complete` property, potentially releasing [Zalgo][] depending on whether the image was cached or not), so if this change made it so "loadend" can be depended upon as a universally reliable point of image readiness, it's a welcome one from me.

[spec]: https://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
[Zalgo]: http://blog.izs.me/post/59142742143/designing-apis-for-asynchrony

Comment 6 by s...@stuartpb.com, Aug 15 2017

I guess my complaint then would be: why does calling drawImage on an incomplete image cause *complete transparency to be drawn*, instead of raising an error, as it would if, say, the image source was a broken SVG image? The latter appears to be the behavior in Firefox: https://stackoverflow.com/questions/15679299/canvas-drawimage-fails

Sign in to add a comment