javascript – The second call of context.strokeText() method deosn't work-ThrowExceptions

Exception or error:
<!doctype html>
<html><head>
    <title>This is an HTML canvas</title>
    <style media="screen">
        body{
            text-align: center;
            font-family: sans-serif;
        }
        canvas {
            background-color: black;
        }
    </style>
</head><body>
    <h1>This is an HTML canvas</h1>
    <canvas id="asteroids" width="400" height="400"></canvas>
    <script>
      var canvas = document.getElementById("asteroids");
      var context = 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 = 3;
	  context.textAlign="center";
	  let msg = "2D Drawing"
	 context.strokeText(msg, canvas.width / 2, 100);
	  context.fillText(msg, canvas.width / 2, 100);
	  
	  let msg2 = "its quite easy"
	  context.fillText(msg2, canvas.width / 2, 330);
	  context.storkeText(msg2, canvas.width / 2, 330);
	</script>
  
</body>
</html>

as you see the second time i call the strokeText method,it has no effect on the text “its quite easy” while the first call does.why does it happen and what can i do for that?enter image description here

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *