HTML5 Canvas strokeText Exercise

Write the following text using HTML5 strokeText.

Solution

The strokeText() method draws text on the canvas. To set the stoke color of text, we can set by using stokeStyle property of canvas context to a color string.

<!DOCTYPE HTML>
<html>
	<head>
	 <script>
	  var canvas = document.getElementById('mycanvas');
	  var context = canvas.getContext('2d');
	  var x = 50;
	  var y = 90;
	  context.font = "50px Georgia";
	  context.lineWidth = 3;
	  context.strokeStyle = 'green';
	  context.strokeText('Good Morning!', x, y);
	 </script>
	</head>
	<body>
	  <canvas id="myCanvas" width="378" height="200"></canvas>
	</body>
</html>

Output of the above code -



Read more articles


General Knowledge



Learn Popular Language