Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

[nduhu]

Does anyone know why?

 

[rich]

You're trying to load an image from a server that isn't CORs enabled.

[rich]

Which includes file:// btw. Just in case you were trying to run a Phaser game locally without a web server.

[nduhu]

hmm i have some game in my server,however if this problem in a server,why just one game have this error

[rich]

I've told you what caused it, it's up to you to figure out how to fix it, as no-one else has access to your server / PC.

 

But essentially you've an image coming in from somewhere that is tainting the canvas. Maybe locally, maybe remotely, who knows.

 

Time to get your sherlock hat on and start checking dev tools network requests / code.

[nduhu]

Ok i'll try to check it again, thanks man.

[nduhu]

hi, 

i found the problem.
if i remove the red code , i'm not get an error again. however i'm still don't know the reason why like that. now i must remove this code, but i need use a pixel perfect for only click in painted area of image . whether i do wrong in this code or i do wrong in my method?

 

 createObject: function(x,y, figure, color, status){

         // console.log('figure :'+figure+' color : '+color);

        var comparisonObject;

        var assetFix= 'object'+color;

        //  console.log(assetFix);

        comparisonObject = this.add.sprite(x, y, assetFix);

        comparisonObject.crossOrigin = "Anonymous";

        comparisonObject.animations.add('default',[figure],20, false);

        comparisonObject.anchor.setTo(0.5,0.5);

        comparisonObject.scale.setTo(0,0);

        var comparisonObjectShadow;

        comparisonObjectShadow = this.add.sprite(x, y, assetFix);

        comparisonObjectShadow.animations.add('default',[figure+7],20, false);

        comparisonObjectShadow.anchor.setTo(0.5,0.5);

        //console.log("Anonymous");

        comparisonObjectShadow.scale.setTo(0,0);

        this.add.tween(comparisonObjectShadow.scale).to({x:1,y:1}, 300, Phaser.Easing.Linear.None, true, 0);

 

        comparisonObject.inputEnabled = true;

        comparisonObject.events.onInputDown.add(this.clickAnswer, this);

        comparisonObject.answer = status;

        comparisonObject.inputEnabled = false;

        this.add.tween(comparisonObject.scale).to({x:1,y:1}, 300, Phaser.Easing.Linear.None, true, 0);

        var tween = this.add.tween(comparisonObject).to({y:comparisonObject.position.y}, 300, Phaser.Easing.Linear.None, true, 0);

        tween.onComplete.add(this.activateObject, this);

 

        this.comparisonArray.push(comparisonObject);

        this.comparisonShadowArray.push(comparisonObjectShadow);

    },

    activateObject: function(compare, pointer){

        compare.inputEnabled=true;

        compare.input.pixelPerfectClick = true;

    },

[jdnichollsc]

Hi!

 

Yes, Offline click does not work with input.pixelPerfectClick = true;   

 

Regards, Nicholls

[rich]

It does. You just have to be running a proper development environment. You can't expect to just drag or open html files into a browser and for everything to work properly - that isn't how browsers work any more. Either serve the file through a local httpd server, or an IDE like Brackets, or a remote host. Or configure your browser to bypass all of its sandbox security settings. Then the canvas won't be tainted and pixel perfect clicks will work just fine. This is a development / local configuration issue, nothing to do with Phaser.