Effet HTML5 de rotation sur du texte

Bonjour,

J'ai fait une petite recherche sur le forum sans trouver mon bonheur d'ou la question suivante.

En HTML5, je crée un canvas dans lequel je tâche d'afficher un caractère provenant d'une police custom. Ce caractère peut varier mais disons qu'il s'agit d'un V de la victoire.

Je souhaiterai réaliser une animation à l'instar de ce que l'on peut voir sur certains affichages : légé zoom et vibration du caractère à droite et à gauche comme s'il y avait une sonnerie.

Je m'attaque donc à la problématique de rotation de texte et je parviens à faire cette dernière mais je bloque sur le faite de redessiner mon caractère depuis le même endroit. J'ai essayé des décalages mais je ne sais pas bien comment les calculer.

Voici mon code :

var mon_animation = {
context2D : {},
loader : function(div_icon)
{
this.context2D = div_icon.getContext('2d');
var context = this.context2D;
context.font = 'normal 40px fontAmoi';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillStyle = '#000';
},
draw_text: function(theText, degRotate)
{
var context = this.context2D;
var dRotate = degRotate;
if (dRotate == undefined)
{
dRotate = 0; // rotation de 0 degrés par défaut
} else {
dRotate = 45; // rotation de 45 degrés par tour
// convertion de degrés en radians
var rotate = dRotate * Math.PI / 180;
// positionner l'origine du texte à dessiner au centre de la zone de dessin
context.translate(75, -25);
// effectuer la rotation sur l'origine
context.rotate(rotate);
}
// dessiner le texte
context.fillText(theText, 65, 65);
// déclencher la nouvelle étape 1 seconde plus tard
setTimeout(function() { mon_animation.draw_text(theText, dRotate ) }, 1000);
},