How to find the origin of error "The canvas has been tainted by cross-origin data."

Report · Oct 28, 2022

Hello,

I'm new to Animate and I am having trouble publishing an HTML5 canvas for an animation (I did not write any apecific JavaScript code for this project), and I need to figure out the cause and fix it.

When selecting (Control -> Test Movie -> in Browser) it works perfectly (running on localhost). However, after publishing and opening it, the page appears as blank on all browsers, and I got this error on the developer Console:

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
    at b._applyFilters (...)
    at b._drawToCache (...)
    at b.update (...)
    at b.define (...)
    at b.cache (...)
    at new lib.project_name (...)
    at handleComplete (...)
    at ....

The output that Animate logs is the following:

WARNINGS:
** 17 Bitmaps packed successfully into 3 spritesheet(s).
Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (91)
Color effects are published as a filter and subject to the same limitations. (13)
Filters are very expensive and are not updated once applied. Cache as bitmap is automatically enabled when a filter is applied. This can prevent animations from updating. (10)
Applying "cache as bitmap" to an animated instance will prevent the animation from updating. (10)
Shadow and glow filters are very expensive effects, and not all options are supported. (6)
Modifying the transform point in a tween can produce unexpected results. (4)

I do have some glow filters, is that the issue? I really need them for this project. Is there any way to prevent this error and still use the filters??

My publishing settings:

I have already tried changing them a bit with no luck.

Please help.

Thank you!

Report · Oct 28, 2022

the cross-domain ussue is because you're opening local files in your browser. upload to a file server and tou won't see that error.