Edit in JSFiddle

window.onload = function () {
    
    //create paper
    var paper = Raphael("canvas");
    
    //白
    path = paper.path("M0,0 C0,100 100,0 150,100");
    path.attr({
        "stroke":"#FFF",
        "stroke-width":"10",
        "stroke-linecap":"butt"
    });
    
    //黒
    path = paper.path("M100,0 C100,100 200,0 250,100");
    path.attr({
        "stroke":"#000",
        "stroke-width":"10",
        "stroke-linecap":"round"
    });
    
    //赤
    path = paper.path("M200,0 C200,100 300,0 350,100");
    path.attr({
        "stroke":"#C10",
        "stroke-width":"10",
        "stroke-linecap":"square"
    });
    
    //青の線
    path = paper.path("M0,100 C0,200 100,100 150,200Z");
    path.attr({
        "stroke":"#00F",
        "stroke-width":"10",
        "stroke-linejoin":"bevel"
    });
    
    //緑の線
    path = paper.path("M100,100 C100,200 200,100 250,200Z");
    path.attr({
        "stroke":"#0F0",
        "stroke-width":"10",
        "stroke-linejoin":"round"
    });
    
    //紫の線
    path = paper.path("M200,100 C200,200 300,100 350,200Z");
    path.attr({
        "stroke":"#908",
        "stroke-width":"10",
        "stroke-linejoin":"miter"
    });
 
 
}

<div id="canvas"></div>

body,html
{
    height:100%;
    margin:0;
}

#canvas 
{
    height:100%;
    background:#aaa;
}