Dessiner sur du canevas permet d'effacer du texte lorsque la souris quitte le graphique

Question

J'ai un graphique en forme d'anneau ChartJS que j'aimerais cliquer sur un segment et il affiche des informations sur le segment au centre du graphique. Cela fonctionne, mais chaque fois que la souris quitte le segment de graphique, les informations disparaissent, je veux qu'il reste jusqu'à ce qu'un autre segment de graphique soit cliqué.

Je mets un exemple de base de cette situation sur JSFIDDLE

canvas.onclick = function(evt) { 
    var activePoints = donut.getElementsAtEvent(evt); 
    if(activePoints[0]) { 
     var chartData = activePoints[0]['_chart'].config.data; 
     var idx = activePoints[0]['_index']; 
     var label = chartData.labels[idx].toUpperCase(); 

     ctx.font = "bold 18px Verdana, Arial, sans-serif"; 
     var textWidth = ctx.measureText(label).width; 

     ctx.fillStyle = "#000"; 
     ctx.fillText(label, (250/2) - (textWidth/2), (250/2)); 
    } 
}; 

Comment puis-je maintenir le texte dans le centre de la carte?

Answer 1

Ne dessinez pas sur le canevas directement (car il est géré par Chart.js). Utilisez plutôt plugin api. Vous pouvez utiliser l'un des crochets fournis - par exemple afterDraw pour dessiner vos éléments une fois le graphique dessiné.

travail jsFiddle:
https://jsfiddle.net/fa7s5q30/12/