안녕하세요, Html canvas 를 이용하여 그리는 중 잘 모르는 부분이 생겨서 질문드립니다.

현재 진행 상황은 다음 그림과 같은데요,

여기서 저 숫자로 이루어진 텍스트에 대해 하단의 그림처럼 커스텀을 하려합니다.

canvas 의 fillText 함수를 써서 작성 하였는데, 저렇게 커스텀이 가능할까요?

현재까지 구현한 코드는 다음과 같습니다.

<div id="drawArea" style="width:800;height:600">
   <canvas id="canvasArea" width="800" height="600"></canvas>
</div>

var canvas = document.getElementById("canvasArea");
var context = canvas.getContext("2d");
var radius = 200;
var width = 800;
var height = 600;
var angle = 0.1;

//calculate angle using value
var minAngle = (1 - angle) * Math.PI + ((1.11120 - 1.11110) / (1.11150 - 1.11110)) * ((2 + angle) - (1 - angle)) * Math.PI;
var maxAngle = (1 - angle) * Math.PI + ((1.11140 - 1.11110) / (1.11150 - 1.11110)) * ((2 + angle) - (1 - angle)) * Math.PI;

//background color
context.fillStyle = '#282830';
context.fillRect(0,0, width,height);

//circular
context.beginPath();
context.arc(width/2, 
            height/2, 
            radius, 
            (1-angle) * Math.PI, (2+angle) * Math.PI,false);
context.lineWidth = 20;
context.strokeStyle="#b9cfce";
context.stroke();

//minimum value line & text
context.fillStyle = "#ffffff";
context.beginPath();
context.moveTo((Math.cos(minAngle) * radius) + (width / 2) , 
           (Math.sin(minAngle) * radius) + (height / 2));
context.lineTo((Math.cos(minAngle) * radius * 1.2) + (width / 2) ,
           (Math.sin(minAngle) * radius * 1.2) + (height / 2));
context.lineWidth = 5;
context.fillStyle="#ffffff";
context.stroke();

//middle value line & text
context.beginPath();
context.moveTo(width / 2, (height / 2) - radius)
context.lineTo(width / 2, (height / 2) - radius - (radius /5));
context.lineWidth = 5;
context.stroke();
context.font = (radius / 10)+"px Arial";
context.fillText("1.11120",
        (Math.cos(minAngle) * radius*1.6) + (width / 2) , 
        (Math.sin(minAngle) * radius*1.2) + (height / 2));
context.font = (radius / 10)+"px Arial";
context.fillText("1.11130", 
            (width / 2) - (radius * 0.25), 
            (height / 2) - radius - (radius * 0.2));

//maximum value line & text
context.beginPath();
context.moveTo((Math.cos(maxAngle) * radius) + (width / 2) ,
           (Math.sin(maxAngle) * radius) + (height / 2));
context.lineTo((Math.cos(maxAngle) * radius * 1.2) + (width / 2) , 
           (Math.sin(maxAngle) * radius * 1.2) + (height / 2));
context.lineWidth = 5;
context.stroke();
context.font = (radius / 10)+"px Arial";
context.fillText("1.11140",  
            (Math.cos(maxAngle) * radius * 1.25) + (width / 2) , 
            (Math.sin(maxAngle) * radius * 1.2) + (height / 2));

감사합니다.