HTML5 Game - Draw and fill text

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

Description

Draw and fill text

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head>
     <title>Canvas element size: 600 x 300, Canvas drawing surface size: 600 x 300</title>
      <style> 
         body {/*from   ww  w  . java2  s.  co  m*/
            background: #dddddd;
         }

         #canvas {
            margin: 10px;
            padding: 10px;
            background: #ffffff;
            border: thin inset #aaaaaa;
         }
      </style>
   </head>

  <body>
    <canvas id='canvas' width='600' height='300'>
      Canvas not supported
    </canvas>

    <script>
let canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
   
context.font = '38pt Arial';
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';

context.fillText("Hello Canvas", canvas.width/2 - 150,
                                 canvas.height/2 + 15);

context.strokeText("Hello Canvas", canvas.width/2 - 150,
                                   canvas.height/2 + 15 );
      
    </script>
  </body>
</html>

Related Topic