Canvas How to - Set Font, Size and Style

Question

We would like to know how to set Font, Size and Style.

Answer


<!--from  ww  w .  java2 s .  co m-->
<!DOCTYPE html>
<html>
<body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      context.font = 'italic 40pt Calibri';
      context.fillText('Hello World!', 150, 100);
    </script>
</body>
</html>

The code above is rendered as follows: