# Problem with MouseEvent when overlapping two canvas

**URL:** https://forum.kirupa.com/t/problem-with-mouseevent-when-overlapping-two-canvas/269999
**Category:** flash
**Created:** [September 4, 2008, 1:43am UTC](https://forum.kirupa.com/t/problem-with-mouseevent-when-overlapping-two-canvas/269999 "2008-09-04T01:43:29Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![marianod](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@marianod](https://forum.kirupa.com/u/marianod)
#### Post date: [September 4, 2008, 1:43am UTC](https://forum.kirupa.com/t/problem-with-mouseevent-when-overlapping-two-canvas/269999/1 "2008-09-04T01:43:29Z")

</div>

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); }