HTML5 Game - Draw text and outline

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

Description

Draw text and outline

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text</title>

  <style>
canvas {//from   w w w  .ja  va  2s  .c om
  border: 1px dashed black;
}
  </style>

  <script>
 
window.onload = function() {
  let canvas = document.getElementById("drawingCanvas");
  let context = canvas.getContext("2d");

  context.textBaseline = "top";
  context.font = "bold 20px Arial";
  context.fillStyle = "black";
  context.fillText("hello java2s.com", 10, 10);

  context.font = "bold 40px Verdana,sans-serif";
  context.lineWidth = 1;
  context.strokeStyle = "red";
  context.strokeText("I?m an OUTLINE", 20, 50);
};

  </script>
</head>

<body>
  <canvas id="drawingCanvas" width="500" height="150"></canvas>
</body>
</html>

Related Topic