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>