1311274 - Canvas2dContext filter: filter-function taints the canvas

Status: RESOLVED DUPLICATE of bug 1307740

(Core :: Graphics: Canvas2D, defect)

Description

[Kaiido]

Attachment: filter bug report.zip

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

Steps to reproduce:

 - set the context's `filter` property to something a filter function (e.g `blur(2px)`
 - draw a valid image on the context
 - call canvas' toDataURL()


Actual results:

The canvas is tainted


Expected results:

The canvas should not be tainted

Ps: works well with SVG filters and `url()` function though.
52 nightly is also concerned.

Comment 1

[Vincent Liu[:vliu]]

Attachment: test-case.html

I'd tried to rewrite test case into a html file and make sure the issue is the same I saw when running the above URL.

Comment 2

[Vincent Liu[:vliu]]

Attachment: test-case.html

Sorry to attach again the test case. This is the right one.

Comment 3

[Vincent Liu[:vliu]]

Attachment: screenshot-1.png

(In reply to Kaiido from comment #0)
> Created attachment 8802413 [details]
> filter bug report.zip
> 
> User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0)
> Gecko/20100101 Firefox/50.0
> Build ID: 20161013141419
> 
> Steps to reproduce:
> 
>  - set the context's `filter` property to something a filter function (e.g
> `blur(2px)`
>  - draw a valid image on the context
>  - call canvas' toDataURL()
> 
> 
> Actual results:
> 
> The canvas is tainted
> 

I am not sure the actual problem you said about "tainted". In my test, the attached file was the image drawn on my Nightly build. I also saw the same on Chrome. Are you see the same? Thanks.

Comment 4

[Kaiido]

When the filter is set, the canvas is tainted => an error raises in the console and the export fails (no duplicate image is appended to the document). 
(maybe an osX only problem ?)

Comment 5

[Vincent Liu[:vliu]]

(In reply to Kaiido from comment #4)
> When the filter is set, the canvas is tainted => an error raises in the
> console and the export fails (no duplicate image is appended to the
> document). 

I might understand your point although I got different error message. When the filter was set, somehow canvas got tainted so image can't draw onto canvas, right? If the checkbox was unchecked, it then draw normally.

> (maybe an osX only problem ?)
I'd also tried on Ubuntu and Windows, it showed the same problem I described above.

Comment 6

[Kaiido]

(In reply to Vincent Liu[:vliu] from comment #5)
> I might understand your point although I got different error message. When
> the filter was set, somehow canvas got tainted so image can't draw onto
> canvas, right? If the checkbox was unchecked, it then draw normally.

No, when the canvas is tainted, the image can be drawn on the canvas, but all export methods are blocked.
So when you click on "call toDataURL()" button, it throws an error and no `<img>` tag is appended to the doc.  
While when the checkbox is unchecked, a new untainted canvas is created and toDataURL works.

Here is a simplified test-case which will hopefully make it more clear : https://jsfiddle.net/Kaiido/0cby7o4m/1/

> > (maybe an osX only problem ?)
> I'd also tried on Ubuntu and Windows, it showed the same problem I described
> above.

I also tried on FF for Android and I can repro the same issue.

Comment 7

[Vincent Liu[:vliu]]

I dug into some code and probably know what the problem is. When ctx.filter() was set, [1] was called to set mIsTainted(true). Once Canvas found mIsTainted
set as true, it will set as write only mode in [2]. After that, Any read relative call like toDataURL will return directly with NS_ERROR_DOM_SECURITY_ERR.

[1]: https://dxr.mozilla.org/mozilla-central/source/layout/svg/nsCSSFilterInstance.cpp#135
[2]: https://dxr.mozilla.org/mozilla-central/source/dom/canvas/CanvasRenderingContext2D.cpp#449
[3]: https://dxr.mozilla.org/mozilla-central/source/dom/html/HTMLCanvasElement.cpp#632

Also, some other filter effects like grayscale() or opacity() also tainted the canvas. Cloneing canvas element seems like to *clean* write-only mode.

Kaiido, in your comment, yout said it works well with SVG filter and 'url()' function. Do you have any example code for this? Can you share it and attached in  this bug.
I want to look into it with these cases to see if there were something I can refers. Thanks

Comment 8

[Kaiido]

(In reply to Vincent Liu[:vliu] from comment #7)

> Kaiido, in your comment, yout said it works well with SVG filter and 'url()'
> function. Do you have any example code for this? Can you share it and
> attached in  this bug.
> I want to look into it with these cases to see if there were something I can
> refers. Thanks

Test case using `url(svgFilter)` function : https://jsfiddle.net/Kaiido/k9ctvhaq/

Comment 9

[C. Martin]

I believe this is a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1307740 which has been fixed in FF52+

Comment 10

[Kaiido]

(In reply to C. Martin from comment #9)
> I believe this is a duplicate of
> https://bugzilla.mozilla.org/show_bug.cgi?id=1307740 which has been fixed in
> FF52+

You're right ! Works in 52.0a1 but wasn't in 52.0a0...

Can't believe I didn't find this duplicate, and good to ear it's already fixed ;-)

Comment 11

[Vincent Liu[:vliu]]

I just sync to latest and confirmed it is a dup of bug 1307740.