Jump to content

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


Recommended Posts

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.

Link to comment
Share on other sites


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);
        var comparisonObjectShadow;
        comparisonObjectShadow = this.add.sprite(x, y, assetFix);
        comparisonObjectShadow.animations.add('default',[figure+7],20, false);
        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);
    activateObject: function(compare, pointer){
        compare.input.pixelPerfectClick = true;
Link to comment
Share on other sites

  • 3 months later...

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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...