How to add canvas as bold for specific text in a multiline string?

Question

Is it possible? html:

   <canvas>  </canvas>

js:

  var ctx = canvas.getContext('2d');
     ctx.font = "10pt  bold Courier";
       var input ="99%" + "More teams partcipated in the contest of asia tournament"
       ctx.fillText(input, 100, 100);

O/p: 99 is dynamic data from service. 99% - should be bold and highlight

More teams Participated in the contest of Asia tournament // normal text

You have to change the `ctx.font` before each `ctx.fillText()`. — StackSlave, Nov 10 '17 at 08:55
@PHPglue how to change for the particular text such as 99% so in that i have confused? — Mohamed Sahir, Nov 10 '17 at 09:07
Try solution provided in this answer https://stackoverflow.com/questions/24163211/html5-canvas-api-italic-word — Lalit, Nov 10 '17 at 09:49
**See Also**: [HTML5 Canvas API - formatting individual words with italics](https://stackoverflow.com/q/24163211/1366033) — KyleMit, Nov 19 '20 at 19:56

score 2 · Answer 1 · edited Nov 19 '20 at 19:52

Try doing the following:

// get canvas / context
var can = document.getElementById('my-canvas');
var ctx = can.getContext('2d')

// draw first text
var text = '99%';
ctx.font = 'bold 12pt Courier';
ctx.fillText(text, 50, 50);

// measure text
var textWidth = ctx.measureText(text).width;

// draw second text
ctx.font = 'normal 12pt Courier';
ctx.fillText(' invisible', 50 + textWidth, 50);

<canvas id="my-canvas" width="250" height="150"></canvas>

How to add canvas as bold for specific text in a multiline string?

1 Answers1