easel JS security restrictions on localhost machine

Question

I'm learning EaselJS and I'm getting this weird error:

Unable to get image data from canvas because the canvas has been tainted by cross-origin data. easeljs-0.6.0.min.js:71

Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.

The thing is, both my images are from localhost - I have them stored in my root directory. This is what my code looks like:

function init() {
    var canvas = document.getElementById("demoCanvas");
    var stage = new createjs.Stage(canvas);
    var im = new createjs.Bitmap("dbz.jpg");
        im.regX - im.image.width *.2; 
        im.regY - im.image.height *.2; 
    stage.addChild(im);
    stage.update();

    im.addEventListener("click", function() {
        var seed = new createjs.Bitmap("seed.jpg");
        stage.addchild(seed);
        stage.update();
    }); //end seed eventlistener

} //end function init()

Answer 1

EaselJS needs to read pixel values to determine mouse collision. I recommend using a local server like MAMP (osx) or XAMPP (win) to do local testing.

http://www.mamp.info/en/index.html http://www.apachefriends.org/en/xampp.html

There are some good ones as well. Internally, we use Grunt for development, and it has a Connect module that provides the same functionality. It requires a bit more setup, but has a ton of other capabilities like code minification, sass compiling, browser auto-reload, etc.

http://gruntjs.com/ https://github.com/gruntjs/grunt-contrib-connect