在圓下畫一個文字

Question

我在用html5畫布和js畫一個圓。

var canvas = document.getElementById(key); 
var context = canvas.getContext('2d'); 
var centerX = canvas.width/2; 
var centerY = canvas.height/2; 
var radius = 35; 

context.beginPath(); 
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
context.fillStyle = 'red'; 
context.fill(); 
context.stroke(); 

我也想在它下面畫一個文字。我嘗試這樣做：

context.closePath(); 
    context.fill(); 
    context.fillStyle = "black"; 
    context.font = "bold 11"; 
    context.textBaseline = "top"; 
    context.fillText('Hello', 100-radius/4 ,100-radius/2); 

但它吸進出於某種原因右漢字的角落，而我的圈子之下想完全吻合。

Answer 1

設置textAlign到中心，然後添加半徑y位置：

var spacing = 5; 
context.textAlign = "center"; 
context.textBaseline = "top"; 
context.fillText('Hello', centerX, centerY + radius + spacing); 

Answer 2

文字對齊方式和協調文本是錯誤的。

var margin = 10; // Increase the margin add space between Circle & text 
context.textBaseline = "top"; 
context.textAlign = "center"; 
context.fillText('Hello', centerX , centerY + radius + margin); 

JSFiddle with desired outcome