How to Set Size and Style of HTML5 Canvas Text

In this article I have described how to set the style and size of Canvas Text in HTML5.
  • 2276

Canvas Text in HTML5

  • Canvas element has a property to set the font and style of text in HTML5.
  • With the help of these properties we can set the style and size of canvas text.
  • We can set it to italic, bold etc by default it is set to normal.


The syntax to set the property of canvas element


    context.font = 'italic 50px Times New Roman';


Lets take an Example





            window.onload = function ()

            var canvas = document.getElementById("myCanvas");

            var context = canvas.getContext("2d");

            context.font = "italic 40pt Arial Black";

            context.fillText("welcome", 150, 100);





    <canvas id="myCanvas" width="578" height="200"></canvas>





 canvas text.gif

Further Readings

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2020 DotNetHeaven. All rights reserved.