EaselJS sprite on("click) returns CORS error

1
votes

First off, I am working on a local EaselJS/CreateJS project, only to test some sprite and mouse interaction.

I have added a simple sprite image to the stage, and I called it "enemy1":

//Create the enemy sprite and add it to the stage
var enemy_image = new Image();
enemy_image .src = "enemy_sprite.png";
var enemy1 = new createjs.Bitmap(enemy_image);

enemy1 .x = 0;
enemy1 .y = 0;

stage.addChild(enemy1);

Using this code, I want to show an alert every time the user clicks on it:

enemy1.on("click", function() 
{
     alert("Clicked!");
});

Instead I get a cross-domain error on each click, as shown below:

enter image description here

If the problem is that I am working local or related to cross-domain requests - why does the picture load (and show) just fine on the stage, and the errors only show just as I click on it?

2
javascripthtmlcross-domaincreatejseaseljs

2 Answers

4
votes

Canvas is perfectly happy to allow you to add cross origin data to it, but doing so (without CORS) will taint the canvas.

You get the error when you try to read data from the canvas while it is tainted.

Presumably the library you are using is trying to read the data as part of its code for determining what you clicked on.

2
votes

I ran into a similar issue when trying to use images hosted on the web. Here is the function I wrote based on that answer as a work around:

function loadImg(uri) {
  var image = document.createElement("img")
  image.crossOrigin = "Anonymous"
  image.src = uri 
  return image
}

Then do:

var enemy1 = new createjs.Bitmap(loadImg("http://example.com/enemy_sprite.png"))