Sprite with drawTriangles distorted when converted to bitmap

Hey, I’m hoping somebody has some ideas to help me get to the bottom of this issue I’m having in HTML5 -

I’m working on a roulette game. I’m using a colour map to represent all of the chip placement locations. There’s a different unique colour for every location. As the user moves the mouse over the table we get the mouseX/mouseY and check for the colour at that pixel location in the map image to work out the bet.

The map image is a regular 2d image that is then drawn with 3d perspective using drawTriangles() so it looks like this -

All that is working fine. The problem is when we try to get the pixel colour.

We draw the sprite containing the above image into a new BitmapData object using BitmapData.draw() and then use getPixel32(x, y) to get the pixel colour. However I’m finding that it’s not always returning the correct colour. After some debugging I realised that if I render the BitmapData out into a bitmap and add it to the stage, it is not being rendered correctly and it distorted in a strange way -

This explains why I’m getting the wrong colour. Does anybody have any ideas why BitmapData.draw() is distorting the image and what I might be able to do to prevent it or work around the issue?

Cheers,

Mark