HTML5 Game - Canvas Fancy text

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

Description

Fancy text

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
   <head>
      <style> 
         body {/*ww  w .j  a v  a 2s.  co  m*/
            background: #dddddd;
         }

         #canvas {
            position: absolute;
            left: 0px;
            top: 0px;
            margin: 20px;
            background: #ffffff;
            border: thin solid #aaaaaa;
         }
      </style>
   </head>

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

    <script>
let context = document.querySelector('#canvas').getContext('2d');

  context.strokeStyle = 'lightgrey'; 
  context.fillStyle = 'dimgrey'; 
  context.lineWidth = 5; 
  context.rect(75, 50, canvas.width - 150, canvas.height - 100); 
  context.stroke(); 
  context.fill(); 
  context.font = "34px Arial"; 
  context.strokeStyle = '#FF2222'; 
  context.fillStyle = '#FFAAAA'; 
  context.lineWidth = 0.75; 
  context.textAlign="center"; 
  let msg = "2D Drawing" 
  context.fillText(msg, canvas.width / 2, 100); 
  context.strokeText(msg, canvas.width / 2, 100); 


       </script> 

      </script>
  </body>
</html>

Related Topic