2 Replies Latest reply on Oct 21, 2009 11:49 AM by Bill Fredericks

    Canvas problems.  Unable to specify background color.

    Bill Fredericks

      I'm brand new to Flex.  I'm trying to place two Canvases on the screen.  Here's my code (I don't see a Preview button and I'm not sure whether this site uses code tags, but I've used them here.  If this doesn't come out properly, please advise on proper code tag usage).  When I try to assign a background color in AddCanvas (), I get an error. However, I can do it successfullybelow inside the tag.  What's wrong?

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="AddCanvas ()">
          <mx:Script>
              <![CDATA[
                  import mx.containers.Canvas;
                              
                  public var mainCanvas:Canvas
                  
                  public function AddCanvas ():void
                  {
                      mainCanvas = new Canvas ();
                      mainCanvas.x = 50;
                      mainCanvas.y = 200;
                      mainCanvas.width = 100;
                      mainCanvas.height = 100;
                      mainCanvas.backgroundColor = 0xFF0000; // this line gives "undefined property" error.
                      this.addChild(mainCanvas);
                  }
              ]]>
          </mx:Script>
      
      
          <mx:Canvas x="50" y="50" width="100" height="100" backgroundColor="#FF0000"></mx:Canvas>    
      </mx:Application>
      
        • 1. Re: Canvas problems.  Unable to specify background color.
          paul.williams Level 4

          backgroundColor is a style, not a property. You set styles programmatically using the setStyle() method:

           

          mainCanvas.setStyle( "backgroundColor", 0xFF0000 );

          • 2. Re: Canvas problems.  Unable to specify background color.
            Bill Fredericks Level 1

            OK, cool.  That worked.  Thank you.  Now I want to draw a green circle on top of my red background.  If I don't have the red background, the green circle seems to draw fine, but when I have the red background, I can't see the green circle.  I'm wondering if perhaps the green circle is drawn first, then the red background is drawn on top of the green circle, thus obliterating it.  Is this true, and how can I fix this?

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="AddCanvas ()">
                 <mx:Script>
                      <![CDATA[
                           import mx.containers.Canvas;
                                        
                          public var mainCanvas:Canvas
                          
                          public function AddCanvas ():void
                          {
                               mainCanvas = new Canvas ();
                               mainCanvas.x = 50;
                               mainCanvas.y = 200;
                               mainCanvas.width = 100;
                               mainCanvas.height = 100;
                               mainCanvas.id = "canv2";
                               mainCanvas.setStyle("backgroundColor", 0xFF0000);
                               this.addChild(mainCanvas);
                               DrawCircle ();
                          }
                          
                          public function DrawCircle():void
                          {
                               var g:Graphics = mainCanvas.graphics;
                               g.beginFill (0x00FF00);
                               g.drawCircle(30, 30, 20);
                          }              
                      ]]>
                 </mx:Script>
            
                 <mx:Canvas id="canv1" x="50" y="50" width="100" height="100" backgroundColor="#FF0000"></mx:Canvas>     
            </mx:Application>