HTML5 Game - Adding Text to the Canvas

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Text Drawing

Description

Adding Text to the Canvas

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>

<head>
    <style>
        #canvas {/*  ww  w .  jav  a 2s  . co m*/
            border: 1px solid #03F;
            background: #CFC;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="640" height="480"></canvas>
    <script>
        let canvas = document.getElementById('canvas').getContext('2d');
        canvas.font = 'bold 80px Tahoma';
        canvas.fillStyle = '#000';
        canvas.fillText('HTML5 Canvas', 10, 100);

        canvas.strokeStyle = '#000';
        canvas.lineWidth = 3;
        canvas.fillStyle = '#ccc';
        canvas.textAlign = 'center';
        canvas.fillText('HTML5 Canvas', 320, 200);
        canvas.strokeText('HTML5 Canvas', 320, 200);
    </script>


</body>

</html>

Related Topic