Question

I am dynamically creating a canvas, and I need a background image within the canvas. The canvas is created as it accepts drag drop but the background image does not show up.

The trigger for the canvas is:

buttonNew.addEventListener("click",addCanvas);

The canvas code is:

private function addCanvas(oEvent:Event):void
            {
                caNew = new Canvas();
                caNew.id = "cart"
                caNew.name = "Shopping Cart";
                caNew.x = 100;
                caNew.y = 450;
                caNew.width = 200;                          
                caNew.height = 146;             
                caNew.setStyle("backgroundImage",cart_icon); 
                //caNew.setStyle("backgroundColor","#98AEEF");
                this.addChild(caNew);
                caNew.addEventListener(DragEvent.DRAG_ENTER, dragAcceptShop);
                caNew.addEventListener(DragEvent.DRAG_DROP, dragDropShop);

                laNew = new Label();
                laNew.id = "contain"
                laNew.text = "Shopping Cart";
                laNew.x = 100;
                laNew.y = 450;
                laNew.width = 120;                          
                laNew.height = 50;
                this.addChild(laNew);

            }

What am I doing wrong? As if I use backgroundImage it works fine and only the colour works.

Answer 1

You didn’t specify which version of the Flex SDK you were using, but backgroundImage is not an available style in the Spark theme. Spark is the default theme for Flex 4 (and later) projects. Check out all available sytles.

One option is to add an Image component as the first child on the canvas.