If you need to allow for variations in formatting, you can set a font style, draw text, measure it using [`measureText`][2], set a new style, and then draw the next block like this:






    // 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>




### Further Reading

* [MDN > Canvas > Drawing text][1]
* [formatting individual words with italics][3]

[1]: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text
[2]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText
[3]: https://stackoverflow.com/q/24163211/1366033

I'm printing text to a canvas in a pretty straight forward way:

    var ctx = canvas.getContext('2d');
    ctx.font = "10pt Courier";
    ctx.fillText("Hello World", 100, 100);

But how can I change the text to bold, italic or both? Any suggestions to fix that simple example?