Problem of fillup with colored rectangles

Question

The following is my canvas
<mx:Canvas id="b1" x="10" y="10" height="40" width="300" borderStyle="solid" borderColor="black"/>
To fill this canvas with rectangles i wrote the following code
               for(var i:int=b1.x;i<b1.x+b1.width;i=i+15)
                    var line1:UIComponent = new UIComponent();
                    var lineThickness1:Number = 1;
                    var lineColor1:Number = 0x000000;
                    var lineAlpha1:Number = 1;
                    line1.graphics.lineStyle(lineThickness1,lineColor1,lineAlpha1);
                    line1.graphics.moveTo(i,b1.y);
                    line1.graphics.drawRect(i,b1.y,15,b1.height);
                    this.addChild(line1);
its fine then
<mx:HBox x="40" y="450">
        <mx:Label text="Enter Units :" fontWeight="bold" fontSize="15"/>
        <mx:TextInput id="tiUnits" width="30" maxChars="1"/>
        <mx:Button id="btn" label="OK" click="btnCall(tiUnits.text);"/>
    </mx:HBox>
In btnCall()
entered input in tiUnits should be converted to integer and by considering that value i need to fill the rectangles(width-15) of canvas one by one with colour
eg: if input is 15 the first rectangle needs to fill with color and if i enter 30 then after first rectangle two rectangles each width 15 needs to fill
in this way i have fill the canvas one after another
please help me.......

Answer 1

Sample code to draw rectangle,
private function drawRectangle(event: MouseEvent): void {
     var unit: int = (Number(tiUnits.text) / 15);
     var colors: Array = [0x0000FF, 0x00FF00, 0xFF0000, 0xFF00FF, 0x00FFFF, 0xFFFF00]
     //Remove all rectangles from canvas
     b1.removeAllChildren();
     for(var i: int = 0; i < unit ; i++) {
          var lineThickness1: Number = 1;
          var lineColor1: Number = 0x000000;
          var lineAlpha1: Number = 1;
          //Random background color
          var bgColor: uint = colors[Math.floor(Math.random() * colors.length)];
          var line1: UIComponent = new UIComponent();
          line1.graphics.lineStyle(lineThickness1, lineColor1, lineAlpha1);
          line1.graphics.beginFill(bgColor, 1.0);
          line1.graphics.moveTo((i * 15), b1.y);
          line1.graphics.drawRect((i * 15) - 1, -1, 15, b1.height - 1);
          b1.addChild(line1);
<mx:Canvas id="b1" x="10" y="10" height="40" width="300" borderStyle="solid" borderColor="black"/>
<mx:HBox x="40" y="450">
     <mx:Label text="Enter Units :" fontWeight="bold" fontSize="15"/>
     <mx:TextInput id="tiUnits" width="30" />
     <mx:Button id="btn" label="OK" click="drawRectangle(event);"/>
</mx:HBox>