Basic shapes

Circle

Code

<canvas id="circle" height="200" width="400"></canvas>
<script type="text/javascript">
    var circle = new cajal('circle');
    circle.add(new cajal.Circle(200, 100, 50)).draw({
        fill  : 'black',
        stroke: 'blue',
        width : 10
    });
</script>
			

Rectangular (normal & rounded corners)

Code

<canvas id="rect" height="200" width="400"></canvas>
<script type="text/javascript">
    var rect = new cajal('rect');
    rect.add(new cajal.Rect(50, 50, 60, 80))
        .add(new cajal.Rect(200, 50, 60, 80, 15))
        .draw({
        fill  : 'black',
        stroke: 'blue',
        width : 10
    });
</script>
			

Path

Code

<canvas id="path" height="200" width="400"></canvas>
<script type="text/javascript">
    var path = new cajal('path');
    path.add(new cajal.Path(50, 50).quadraticCurve(100, 50, 50, 80)
                                             .to(80, 120)
                                             .to(20, 80)))
        .draw({
            fill  : 'black',
            stroke: 'blue',
            width : 10
    });
</script>
			

Text

Code

<canvas id="text" height="200" width="400"></canvas>
<script type="text/javascript">
    var text = new cajal('text');
    text.add(new cajal.Text(50, 150, "cajal"))
        .draw({
            fill  : 'black',
            font  : '90px sans-serif'
    });
</script>
			

Polygon

Code

<canvas id="poly" height="200" width="400"></canvas>
<script type="text/javascript">
    var poly = new cajal('poly');
    poly.add(new cajal.Polygon(200, 100, 5, 80))
        .draw({
            fill  : 'black',
            stroke: 'blue',
            width : 10
    });
</script>
			

Circular Sector

Code

<canvas id="sector" height="200" width="400"></canvas>
<script type="text/javascript">
var sec = new cajal('sector');
sec.add(new cajal.CircleSector(200, 100, 50, 120))
   .draw({fill: 'black', stroke: 'blue', width: 10});
</script>
			

Circular Segment

Code

<canvas id="segment" height="200" width="400"></canvas>
<script type="text/javascript">
var seg = new cajal('segment');
seg.add(new cajal.CircleSegment(200, 100, 50, 120).close())
   .draw({fill: 'black', stroke: 'blue', width: 10});
</script>