Apache – flex popup manager

I am trying to popup image preview using popup manager in flex. I have a button in one of my mxml components pressing which we can preview image in a pop up canvas which is another mxml component. But I am getting following error.

TypeError: Error #1009: Cannot access a property or method of a null object reference.

at components::CanvasPopup/init()

Following are my code snippets:

In my mxml component AddNewPromo where button is lying:

<mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            public var path:String="abc.jpg";

            private function showPopUp(e:MouseEvent):void
            {

            var popUpObj:CanvasPopup = CanvasPopup(PopUpManager.createPopUp(this,CanvasPopup,true));
            PopUpManager.centerPopUp(popUpObj);
            }

        ]]>
</mx:Script>

In my canvas mxml component used for pop up:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="400" initialize="init()">
<mx:Script>
<![CDATA[

import mx.controls.Alert;
import mx.managers.PopUpManager;
import flash.events.MouseEvent;
private function closeThis(e:MouseEvent):void
{
PopUpManager.removePopUp(this);
}
public var popObj:AddNewPromo = new AddNewPromo();
[Bindable]
public var imagePath:String;

private function init():void{

imagePath= popObj.path.toString();
var btn:Button = new Button();
btn.move(this.width-5,2);
btn.label="Close";
btn.addEventListener(MouseEvent.CLICK,closeThis);
addChild(btn);
}
]]>
</mx:Script>

<mx:Image source="{imagePath}" horizontalCenter="0" verticalCenter="0"/>
</mx:Canvas> 

Please help me out.