title: Drawing squares on Flex Canvas
body: <p>I'm trying to write some code to an animated images of squares on a Flex Canvas.  There's something wrong with my code below because it becomes progressively slower.  I assume I'm supposed to clear the old squares or something.</p>
  
  <p>What am I doing wrong below?:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();"&gt;
  &lt;mx:Script&gt;
  &lt;![CDATA[
  public var ticker:Timer;
  
      public function init():void {
  
          ticker = new Timer(10);
  
          // This implements the timerEvent
          ticker.addEventListener(TimerEvent.TIMER, update);
          ticker.start();
  
          draw();
      }
  
      public function update(evt:TimerEvent):void {
          draw();
      }
  
      public function draw():void {
          var squareSize:uint = 10;
          var square:Shape = new Shape();
  
          square.graphics.beginFill(0xFFFFFF, 1.0);
          square.graphics.drawRect(0, 0, myCanvas.width, myCanvas.height);
  
          var i:int;
          for (i = 0; i &lt; myCanvas.height / squareSize; i++) {
              var j:int;
              for (j = 0; j &lt; myCanvas.width / squareSize; j++) {
                  if (Math.random() &lt; 0.5) {
                      square.graphics.beginFill(0x000000, 1.0);
                      square.graphics.drawRect(j * squareSize, i * squareSize, squareSize, squareSize);
                  }
              }
          }
  
          square.graphics.endFill();
          myCanvas.rawChildren.addChild(square);
      }
  ]]&gt;
  &lt;/mx:Script&gt;
  
      &lt;mx:Panel title="Random Squares" height="95%" width="95%" 
          paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"&gt;
  
          &lt;mx:Canvas id="myCanvas" borderStyle="solid" height="100%" width="100%"&gt;
          &lt;/mx:Canvas&gt;
  
      &lt;/mx:Panel&gt;
  &lt;/mx:Application&gt;
  </code></pre>