HTML5 Game - Paint Text on a Canvas

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

Description

Paint Text on a Canvas

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html> 
<head>
<script>
window.onload = function()//from   ww w. j av  a  2 s . c  o  m
{ 
   canvas  = document.getElementById("canvasArea"); 
   context = canvas.getContext("2d");

   let mText = "Hi!"
   let xPos  = canvas.width/2;
   let yPos  = canvas.height/2;

   context.font         = "90pt Comic Sans MS"; 
   context.fillStyle    = "lime";
   context.textAlign    = "center"; 
   context.textBaseline = "middle";

   context.fillText(mText, xPos, yPos);                  
}
</script>
</head>
<body>
<div style="width:200px; height:200px; 
            margin:0 auto; padding:5px;">
<canvas   id     ="canvasArea" 
          width  ="200" height ="200" 
          style  ="border:2px solid black">
You're browser doesn't currently support HTML5 Canvas.
</canvas>
</div> 
</body>
</html>

Related Topic