Buenas noches.
¿Quién puede explicar por qué, después de canvas.translate(0, -canvasRadius * 0.8); necesitamos usar canvas.rotate(-ang)?
Supongo que esto es para "regresar" a la posición 0 original. Pero no está claro para qué son las líneas posteriores.
for (num = 1; num < 13; num++) { ang = (num * Math.PI) / 6; canvas.rotate(ang); canvas.translate(0, -canvasRadius * 0.8); canvas.rotate(-ang); canvas.fillText(num.toString(), 0, 0); canvas.rotate(ang); canvas.translate(0, canvasRadius * 0.8); canvas.rotate(-ang); }Parece que gira el lienzo para que la traducción posterior esté en el punto correcto para el número. Una rotación en la dirección opuesta asegura que el subsiguiente fillText esté en la posición correcta.
Las rotaciones restantes y la traducción revierten las operaciones anteriores y se trasladan de nuevo al origen listo para la siguiente iteración.