0

So I am making this game where you will be able to drag images around in the medallion area. There is a foreground image of the outer ring of the medallion that has a image hit region on it so you can drag the images underneath it. I had it working at one point and I came back the next day and it wasn't working. Can anyone please tell me what I'm doing wrong? I keep getting the warning sign "Kinetic warning: Unable to create image hit region. Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data."

Here is my jsfiddle

var ground = [];
function buildStage(images) {   
    var i = 0;  
    for(var src in sources) {
        if( i < 2 ){
            ground[i] = new Kinetic.Image({
                image: images[src],
                x: 0,
                y: 0,
                width: stage.getWidth(),
                height: stage.getHeight()
            });
            layer.add(ground[i]);
        } else
            continue;
        i++;
    }

    layer.add(ground[0]);
    layer.add(ground[1]);
    stage.add(layer);   

    ground[1].createImageHitRegion(function() {
        layer.draw();
    }); 
    ground[0].moveToBottom();
    ground[1].moveToTop();  
    layer.draw();

}

mdurchholz
  • 523
  • 1
  • 4
  • 16
  • By default, you cannot use a picture from a site other than the webpage site. Check out this previous post that deals with the issue: http://stackoverflow.com/questions/19869150/html5-canvas-element-getimagedata-cross-origin-error/19869402#19869402 – markE Nov 22 '13 at 19:23
  • Thanks! I ended up changing the hard url path to a normal image path and it works now – mdurchholz Nov 22 '13 at 20:04

0 Answers0