Problem with MouseEvent when overlapping two canvas

Hi,

I’m using the drawing API features to do the following:

I created two different squares and want to use them as two different canvas to draw on, they should be on top of each other so for testing purpose I overlap them partially here, but somehow I’m having trouble when trying to draw on the overlapped areas.
Has any one encountered this problem or know how to solve it? I don’t know if its a bug :(, any help would be veeeeeeeery appreciated.

Here’s the code:


////variables////////////////////////////////////////////////
var lineThickness:uint = 3;
var lineColor:uint = 0x000000;

////create the 1st canvas/////////////////////////////
var canvas1:Sprite = new Sprite();
var color1:Number = 0x0FFF00CC;
var _bmp1:BitmapData = new BitmapData(150, 150, true, color1);
var bmp1 = new Bitmap(_bmp1, “auto”, true);
canvas1.name = “canvas1”;
canvas1.addChild(bmp1);
addChild(canvas1);

////create the 2nd canvas/////////////////////////////
var canvas2:Sprite = new Sprite();
var color2:Number = 0x0F33FF00;
var _bmp2:BitmapData = new BitmapData(150, 150, true, color2);
var bmp2 = new Bitmap(_bmp2, “auto”, true);
canvas2.name = “canvas2”;
canvas2.addChild(bmp2);
canvas2.x = 100;
addChild(canvas2);

////1st canvas listeners/////////////////////////////
canvas1.addEventListener(MouseEvent.MOUSE_DOWN,handleMouseDown);
canvas1.addEventListener(MouseEvent.MOUSE_UP,handleMouseUp);

////2nd canvas listeners/////////////////////////////
canvas2.addEventListener(MouseEvent.MOUSE_DOWN,handleMouseDown);
canvas2.addEventListener(MouseEvent.MOUSE_UP,handleMouseUp);

////MouseDown function/////////////////////////////
function handleMouseDown(event:MouseEvent):void {
//trace(“now I’m drawing on :”+event.target.name);
event.target.graphics.lineStyle(lineThickness,lineColor);
event.target.graphics.moveTo(event.target.mouseX,event.target.mouseY);
event.target.addEventListener(MouseEvent.MOUSE_MOVE,startDrawing);
}

////MouseUp function/////////////////////////////
function handleMouseUp(event:MouseEvent):void {
event.target.removeEventListener(MouseEvent.MOUSE_MOVE,startDrawing);
}

////Drawing function/////////////////////////////
function startDrawing(event:MouseEvent):void {
trace(“now I’m drawing on :”+event.target.name);
event.target.graphics.lineTo(event.target.mouseX,event.target.mouseY);
}