Html graphics rendering control like the BitBucket one

Question

Here's code to draw the primitives in the commit graph:

lines: that curve into columnar tracks
branches: that split a single line into 2
dots: representing events

A Demo: http://jsfiddle.net/m1erickson/cz37L/

enter image description here

Example code:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=2;

    var offsetX=20;
    var offsetY=10;
    var spacingX=12;
    var spacingY=25;
    var y=0;

    // lines 
    var lines=[];
    lines.push([0,0,0,0,1,1,2,2,2,2,2,2,2,2,2,2,3]);
    lines.push([1,1,1,1,2,2,3,3,3,3,3,3,3,3,3,3,4]);
    lines.push([2,2,2,2,3,3,4,4,4,4,4,4,4,4,4,4,5]);
    lines.push([3,3,3,3,4,4]);
    lines.push([4,4,4,4,5,5,5,5,5,5,5,5,5,5,5,5]);
    lines.push([5,5,5,5]);

    var branches=[];
    branches.push({line:2,x1:4,y1:5,x2:4,y2:4});
    branches.push({line:3,x1:5,y1:2,x2:4,y2:3});
    branches.push({line:4,x1:5,y1:6,x2:4,y2:5});
    branches.push({line:4,x1:5,y1:14,x2:4,y2:13});

    // dots
    var events1=[5,5,5,4,4,4,5,4,4,4,4,4,4,4,5,5];
    var events2=[5,5,5,3,3,2,4,2,2,2,2,2,2,2,4,2];

    var colors=["purple","olive","cyan","magenta","khaki","green"];

    drawAll();

    function drawAll(){
        for(var i=0;i<lines.length;i++){
            drawLine(lines[i],colors[i]);
        }

        for(var i=0;i<branches.length;i++){
            drawBranch(branches[i],colors[branches[i].line]);
        }

        for(var i=0;i<events1.length;i++){
            ctx.beginPath();
            ctx.arc(offsetX+events1[i]*spacingX,offsetY+i*spacingY,3,0,Math.PI*2);
            ctx.closePath();
            ctx.fillStyle=colors[events2[i]];
            ctx.fill();
        }
    }

    function drawBranch(branch,linecolor){
        var x1=offsetX+branch.x1*spacingX;
        var x2=offsetX+branch.x2*spacingX;
        var y1=offsetY+branch.y1*spacingY;
        var y2=offsetY+branch.y2*spacingY;
        var cy=cy2=y1+(y2-y1)/2;
        ctx.beginPath();
        ctx.moveTo(offsetX+branch.x1*spacingX,offsetY+branch.y1*spacingY);
        ctx.bezierCurveTo(x1,cy,x2,cy,x2,y2);
        ctx.strokeStyle=linecolor;
        ctx.stroke();
    }

    function drawLine(line,linecolor){
        var y=0;
        ctx.beginPath();
        ctx.moveTo(offsetX+line[0]*spacingX,offsetY+y*spacingY);
        for(var i=1;i<line.length;i++){
            if(line[i]==line[i-1]){
                ctx.lineTo(offsetX+line[i]*spacingX,offsetY+y*spacingY);
            }else{
                var x1=offsetX+line[i-1]*spacingX;
                var x2=offsetX+line[i]*spacingX;
                var y1=offsetY+(y-1)*spacingY;
                var y2=offsetY+y*spacingY;
                var cy=cy2=y1+(y2-y1)/2;
                ctx.bezierCurveTo(x1,cy,x2,cy,x2,y2);
            }
            y++;
        }
        ctx.strokeStyle=linecolor;
        ctx.stroke();
    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=400></canvas>
</body>
</html>