How to make text write counterclockwise

Question

How to make a text entry counterclockwise?

function drawTextAlongArc(context, str, centerX, centerY, radius, angle){ context.save(); context.translate(centerX, centerY); context.rotate(-1 * angle / 2); context.rotate(-1 * (angle / str.length) / 2); for (var n = 0; n < str.length; n++) { context.rotate(angle / str.length); context.save(); context.translate(0, -1 * radius); var char = str[n]; context.fillText(char, 0, 0); context.restore(); } context.restore(); } window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.font = "30pt Calibri"; context.textAlign = "center"; context.fillStyle = "blue"; context.strokeStyle = "blue"; context.lineWidth = 4; var centerX = canvas.width / 2; var centerY = canvas.height - 30; var angle = Math.PI * 0.8; // radians var radius = 150; drawTextAlongArc(context, "Text along arc path", centerX, centerY, radius, angle); // draw circle underneath text context.arc(centerX, centerY, radius - 10, 0, 2 * Math.PI, false); context.stroke(); }; 

I want the text to look like this: counterclock-wise

Answer 1

Not sure what you are asking, but if you want to write the text back in a counterclockwise direction, you just change this line:

 drawTextAlongArc(context, "Text along arc path", centerX, centerY, radius, -angle); 

last argument changed to -angle

the text will be back though, as one would expect.