font canvas javascript Roboto code example

Example: js canvas text custom font

<html>
  <head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
  </head>
  <body>
    <p>to use external fonts you must have them linked to the dom</p>
    <canvas id="c" width="500" height="300"></canvas>
    <script>
    var c = document.getElementById("c");
    var ctx = c.getContext("2d");
    ctx.font = "40px Roboto";//notice that behind the px comes the font family name
    ctx.fillText("hello world",40,40);
    </script>
  </body>
</html>

Tags:

Html Example

Recent Posts