<canvas id="myCanvas" width="679" height="290"></canvas>

function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {
    var len = str.length, s;

    context.save();
    context.translate(centerX, centerY);
    context.rotate(-1 * angle / 2);
    context.rotate(-1 * (angle / len) / 2);

    for(var n = 0; n < len; n++) {
       context.rotate(angle / len);
       context.save();
       context.translate(0, -1 * radius);

       s = str[n];
       context.fillText(s, 0, 0);
       context.restore();
    }
    context.restore();
}

var canvas = document.getElementById('myCanvas'),
    context = canvas.getContext('2d'),
    centerX = canvas.width / 2,
    centerY = canvas.height + 40,
    angle = Math.PI * 0.8,
    radius = 250;

context.font = 'bold 30pt Ubuntu';
context.textAlign = 'center';
context.fillStyle = 'orange';
context.strokeStyle = '#336699';
context.lineWidth = 10;

drawTextAlongArc(context, 'Sustainable Skill Solutions', centerX, centerY, radius, angle);


// draw circle underneath text
context.arc(centerX, centerY, radius +70, 0, 2 * Math.PI, false);
context.stroke();