jCanvas Words in Circle

by Caleb Evans

HTML

<script src="http://f.cl.ly/items/0d091K3G3b3n1e3U3s3x/jcanvas.min.js"></script>
<canvas width="800" height="400" class="rounded"></canvas>

CSS

canvas {
 border: solid 1px #eee;   
}

JavaScript

$(document).ready(function() {

    // Draw a full circle
    $("canvas").drawArc({
        strokeStyle: "#000",
        strokeWidth: 5,
        x: 90,
        y: 100,
        radius: 50
    }).drawText({
        layer: true,
        fillStyle: "#9cf",
        strokeStyle: "#25a",
        x: 90,
        y: 100,
        text: "Web Development"
    });


    // Draw a full circle
    $("canvas").drawArc({
        strokeStyle: "#000",
        strokeWidth: 5,
        x: 122,
        y: 300,
        radius: 50
    }).drawText({
        layer: true,
        fillStyle: "#9cf",
        strokeStyle: "#25a",
        x: 122,
        y: 300,
        text: "Architecture"
    });


    // Draw a full circle
    $("canvas").drawArc({
        strokeStyle: "#000",
        strokeWidth: 5,
        x: 305,
        y: 59,
        radius: 50
    }).drawText({
        layer: true,
        fillStyle: "#9cf",
        strokeStyle: "#25a",
        x: 305,
        y: 59,
        text: "Business Process Improvement"
    });


    // Draw a full circle
    $("canvas").drawArc({
        strokeStyle: "#000",
        strokeWidth: 5,
        x: 250,
        y: 196,
        radius: 50
    }).drawText({
        layer: true,
        fillStyle: "#9cf",
        strokeStyle: "#25a",
        x: 250,
        y: 196,
        text: "Business Analysis"
    });


    // Draw a full circle
    $("canvas").drawArc({
        strokeStyle: "#000",
        strokeWidth: 5,
        x: 344,
        y: 338,
        radius: 50
    }).drawText({
        layer: true,
        fillStyle: "#9cf",
        strokeStyle: "#25a",
        x: 344,
        y: 338,
        text: "Project Management"
    });


    // Draw a full circle
    $("canvas").drawArc({
        strokeStyle: "#000",
        strokeWidth: 5,
        x: 457,
        y: 129,
        radius: 50
    }).drawText({
        layer: true,
        fillStyle: "#9cf",
        strokeStyle: "#25a",
        x: 457,
        y: 129,
        text: "Package Selection"
    });


  ...