Search notes:

HTML element canvas: fillText

fillText can be used to write text onto a <canvas>.

The following html document attempts to demonstrate writing hello World with the Scriptina font.

<!DOCTYPE html>
<html>
<head><title>fillText</title>

<style type='text/css'>
@font-face {
  font-family: Scriptina;
  src: url(fonts/Scriptina/Scriptina.eot?#iefix   ) format('embedded-opentype'),
       url(fonts/Scriptina/Scriptina.woff         ) format('woff'             ),
       url(fonts/Scriptina/Scriptina.ttf          ) format('truetype'         ),
       url(fonts/Scriptina/Scriptina.svg#Scriptina) format('svg');
  font-weight: normal;
  font-style : normal;
}
</style>
<script type="text/javascript">

    function init() { try {

       let canvas = document.getElementById('canvas');

       let ctx = canvas.getContext('2d');

   //  Choose the font:
       ctx.font='50px Scriptina';
       ctx.fillStyle='#fe7622';

    // Write the text using the font
       ctx.fillText("Hello world", 80, 110);

    } catch(e) {alert (e)} }

</script>
    </head>

<body onload='init();'>

      <canvas id    ='canvas'
                      width='400' height='180'
              style ='width:400px;height:180;border:solid 1px black;margin-left:-200px;margin-top:-90px;left:50%;position:fixed;top:50%' ></canvas>

</body>
</html>

Github repository about-html-canvas, path: /text/fillText.html

The html document produces:

HTML element canvas: fillText

See also