HTML5 Game - Draw text on canvas

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

Description

Draw text on canvas

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <style type = "text/css">
    body {/*ww w . j  a va2 s. com*/
      background-color: #cccccc;
    }
  </style>
  <script type = "text/javascript">
    function draw(){
      let drawing = document.getElementById("drawing");
      let con = drawing.getContext("2d");
      
      //clear background
      con.fillStyle = "white";
      con.fillRect(0,0, 200, 200);

      // draw font in red
      con.fillStyle = "red";
      con.font = "20pt sans-serif";
      con.fillText("Canvas Rocks!", 5, 100);
      con.strokeText("Canvas Rocks!", 5, 130);
    }
  </script>
</head>

<body onload = "draw()">
  <h1>Text</h1>
  
  <canvas id = "drawing"
          height = "200"
          width = "200">
    <p>Canvas not supported!</p>
  </canvas>

</body>
</html>

Related Topic