Get Pixel from Stage - KineticJS

Question

I have the Script:

//Inicializa Canvas con el nombre "Stage"... var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = new Kinetic.Layer();

    var rectX = stage.getWidth() / 2 - 50;
    var rectY = stage.getHeight() / 2 - 25;


    var box = new Kinetic.Rect({
        x: 100,
        y: 100,
        width: 200,
        height: 50,
        fill: '#0080C0',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true
    });


    layer.add(box);
    stage.add(layer);

And I need get the Pixel (x/y) 10,20 with KineticJS but I can't use getImageData because the Canvas of KineticJs haven't ID.

Thanks!

PS: Sorry for my english.

projeqht projeqht · Accepted Answer · 2013-08-27T15:55:44

You wouldn't need an ID to select the KineticJS canvas since it is a canvas after all. Just be aware that Kinetic uses 2 canvases for every layer.

$('#container canvas').click(function(e) {
  var x = 10;
  var y = 20;
  var ctx = this.getContext('2d');
  var pixelData = ctx.getImageData(x, y, 1, 1).data;
});

Get Pixel from Stage - KineticJS

1 Answers