Is there a way to emphasize only some text with html canvas?

Hello, I'm asking you a question because there's something I don't know while I'm drawing using Html canvas.

The current progress is shown in the following figure.

So I'm going to customize that numeric text like the picture below.

I wrote it using the fillText function of canvas, is it possible to customize it like that?

The following codes have been implemented:

<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));

Thank you.

html canvas javascript

2022-09-20 22:08

1 Answers

I'm ashamed that there is a JavaScript function that can be implemented while Googleing, but I'm leaving a self-answer.

function empasisText (context, text, x, y) {
    var words = text.split('');
    for(var n = 0; n < words.length; n++) {
       if (n == 4 || n == 5) {
          context.font="30px Arial";
          context.fillText(words[n], x, y);
       }
       else {
           context.font="15px Arial";
           context.fillText(words[n],x,y);
       }
       var metrics = context.measureText(words[n]);
       x += metrics.width;
    }
}

The function execution results are shown below.

2022-09-20 22:08

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656