Draw text along the arc on layer - html

Question

I am trying to add text along the arc and I read the tutorial. There is a function as below. I don't quite understand the difference between Layer and Context and which one I should use. Is a Layer Canvas plus Context?
I created an arc on the layer which is different from the tutorial. In drawTextAlongArc, how can I draw the text along the arc using Layer? Or I have to use Context to do the work? It's not working now. But if it works, will the arc be drawn on the layer?
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 stage = new Kinetic.Stage({
container: "mainContainer",
width: $("#mainContainer").width(),
height: $("#mainContainer").height()
});
var layer = new Kinetic.Layer();
var kineticGroup = new Kinetic.Group({
x: 300,
y: 120,
draggable: true,
fill: 'black',
draggable: true
});
var arc = new Kinetic.Arc({
innerRadius: 90,
outerRadius: 92,
stroke: 'black',
strokeWidth: 1,
angle: 180,
rotationDeg: 180
});
var canvas = layer.getCanvas(),
context = canvas.getContext('2d'),
centerX = canvas.width / 2,
centerY = canvas.height - 30;
drawTextAlongArc(context, 'Text along arc path', centerX, centerY, 92, 180);
context.stroke();
kineticGroup.add(arc);
layer.add(kineticGroup);
stage.add(layer);
stage.draw();