fillTextを使用してキャンバスに空白を書き込む

Question

私は値を表示する必要があるchart.jsドーナツチャートを中心に持っています。チャートを更新して中央値に影響を与える日付フィールドがあります。

var text = dataTxt, 
     textX = Math.round((width - ctx.measureText(text).width)/2), 
     textY = height/2; 
    ctx.fillText(" ", textX, textY);//attempting to write blank value. 
    ctx.fillText(text, textX, textY); //this writes the value. 
    ctx.save(); 

問題は、チャートのその後の更新時に中央の領域がクリアされていないということです&値が古い1の上に書き込まれます。

私は上記のコードにctx.fillText(" ", textX, textY);行を追加しましたが、効果はありません。 テキストがそこに書き込まれる前に領域をクリアする方法に関するアイデアはありますか？

中央にデータを書き込むためのHTML/CSSソリューションがありますが、グラフがPNG形式でダウンロードされたときに中央データをエクスポートしないため、使用できません。

Answer 1

典型的な使用例では、キャンバス上で変更を元に戻すことはありません。キャンバスをクリアしてからもう一度やり直すのはずっと簡単です。

ctx.clearRect(0, 0, canvas.width, canvas.height); 
// Do my drawing again 
myChart.update(); // With chart.js this triggers a redraw. 

あなたのケースでは、キャンバスがテキストイメージを保存していることを間違えていると思います。後続の図面で変更することができます。それをMicrosoft Paintのように考えてください。一度テキストがイメージ上に表示されたら、元に戻すことなく簡単に取り除くことはできません。