Coordinate of getImageData seems to be wrong

[Ovilia]

I'm using Stage.js to implement a magnifying glass effect like this.

The circle in the top shows the magnified area around mouse position. I tried to read the pixels rendered by Stage.js using getImageData but got all 0 in data. My code is available here.

I'm not sure if transformation of canvas in your game engine changed anything for getImageData, but I don't think this should be an issue since canvas spec states:

The current path, transformation matrix, shadow attributes, global alpha, the clipping region, and global composition operator must not affect the getImageData() and putImageData() methods.

Any idea how should I get the pixels around mouse position in this way? Or, what else game engine should I use to implement this magnifying glass effect?

Thanks!

[shakiba]

Have you considered using the canvas create by Stage.js as an image in your second canvas? If you do that you will not need to get and copy image data.

[Ovilia]

@shakiba How can I use it as an image? By toDataURL?

[shakiba]

Just use context as image object. But anyway because canvas is raster, scaling rendered result is going to be pixelated.

Another option is adding a new node type which clones another node and is pinned independently. Therfore your graphics are rendered as they are. But I'm not yet sure how to cut a circle.

[Ovilia]

Thanks! It works when I use it as an image. Helped a lot!