Multiple components

HTML

<script src="http://craftyjs.com/release/0.4.9/crafty.js"></script>

JavaScript

Crafty.init(600,600);
Crafty.background('rgb(30,30,30)');

//create your component
Crafty.c("TwoRects", {
    //this function (always called 'init') will be called whenever an entity is created with this 
    //component
    init: function(){
        //we require 2D so we can specify coordinates with this component
        this.requires("2D");
        
        //IMPORTANT: this is where magic begins, we add to parameters to "this", these are our two
        //rects
        this.rect1 = Crafty.e("Canvas, 2D, Color");
        this.rect2 = Crafty.e("Canvas, 2D, Color");
    },
    //to this function we will pass two colors: colors of our rects
    twoRects: function(col1, col2){
        var size = 100;
        //IMPORTANT: here we take our previously initialized rects and pass arguments to them:
        //their coords, size and color from the argument list
        this.rect1.attr({x:this.x, y:this.y, w:size, h:size})
                         .color(col1);
        this.rect2.attr({x:this.x, y:this.y+size, w:size, h:size})
                         .color(col2);
        
        this.attach(this.rect1);
        this.attach(this.rect2);
    }
});

//finally, we use the component in an enitity and use the function twoRects
Crafty.e("2D, TwoRects, Fourway").fourway(2)
    .attr({x:100, y:200})
    .twoRects('rgb(30,150,30)', 'rgb(30,30,150)');