How to get Text to show up inside Canvas tag with JavaScript?


#1

I am having trouble getting my text to appear inside my Canvas Tag using Javascript. I am a student working on an assignment. Please help me understand what is not working right and how to fix it.
Thank you.
This is my code:

<!DOCTYPE html>
<html>
<head>
	<!-- Metadata -->
	<title>Tonya Johnson | Web Animation Portfolio</title>
	<meta charset="UTF-8">
	<meta name="author" content="Tonya Johnson"/>
	<meta name="description" content="A portfolio of HTML5 web graphics and canvas animation." />
	<meta name="keywords" content="WGD235,HTML5, web graphics, animations" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	
	
	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="css/kickstart.css" media="all" />
	<link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> 
	
	<link href="https://fonts.googleapis.com/css?family=Montserrat|Raleway" rel="stylesheet">

	<!-- JavaScript -->
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/kickstart.js"></script>
	
	
	<!-- JavaScript for WK2 Lab Assignment -->
	<script>
	var canvas;
	var context;
		
	
		
	function showText() {
	//Get references to the canvas and then the drawing context
	canvas = document.getElementById("myCanvas");
	context = canvas.getContext("2d");
	
	var canvas = document.getElementById("myCanvas").getContext("2d");
		context.font = "bold 60pt Raleway";
		context.fillStyle = "#000";
		context.fillText ("HTML5 Canvas", 40, 80);
		context.strokeStyle = "#000";
		context.lineWidth = 3;
		context.fillStyle = "#ccc";
		context.textAlign = "center";
		context.fillText ("HTML5 Canvas", 320, 160);
		context.strokeText ("HTML5 Canvas", 320, 160);
	}
		
		<!-- Wait for the entire page to load, then run script -->
		window.addEventsListener("load",showText,false);
	</script>
	
</head>

<body>

	<div class="grid">
	
	  <nav>
	    <ul class="menu">
		  <li class="current"><a href="index.html">Home</a></li>
		  <li><a href="#">Lab Assignments</a>
		    <ul>
			  <li><a href="wk1.html">WK1:HTML5 and CSS</a></li>
			  <li class="current"><a href="wk2.html">WK2: Canvas Text</a></li>
			  <li><a href="#">WK3: Canvas with Pixel-based Graphics</a></li>
			  <li><a href="#">WK4: Timeline Animation</a></li>
			  <li><a href="#">WK5: Canvas with Vector Graphics</a></li>
			  <li><a href="#">WK6: Vector Animation and Graphs</a></li>
			  <li><a href="#">WK7: Final Portfolio</a></li>
			</ul></li>
		  <li><a href="#">Resources</a></li>
		  <li><a href="#">About</a></li>
		  <li><a href="#">Search</a></li>
		</ul>
      </nav>
	  
	  

		<div class="col_12">
			<h1>Using HTML5 Canvas for Text</h1>
			
			<canvas id="myCanvas" width="980" height="320" style="border:1px solid #000;">
			We're sorry. Your browser does NOT support the HTML5 canvas tag.
			</canvas>	
	
		</div><!-- End col_12 -->
	  
	  
	<footer>
	  <p>&copy Copyright 2019. Developed by Tonya Johnson for WGD235. All Rights Reserved.</p>
	</footer>
	
</div> <!-- End Grid -->

</body>
</html>

This is what I get:
http://127.0.0.1:11160/preview/app/index.html


#2

Did you get any errors?
If yes then the problem is that you redefine canvas variable which leads to an error:

And you’ve put an s to there:
image

Hope this helps :grinning:


#3

This is just a typo. Name of the method is addEventListener, not addEventsListener, as we add a single event listener.

In situation like this it’s usually a good idea to make sure that the browser didn’t logged any errors. You can do this by opening developer tools in your browser (F12 in the Chrome) and checking the console tab. You would find there this error message:

TypeError: window.addEventsListener is not a function

which would definitely help you to narrow down the problem.


By the way, this line of code:

var canvas = document.getElementById("myCanvas").getContext("2d");

is redundant, you can delete it. In this line you define a local variable which is never used. This not an error, but it simply does nothing.


#4

That was it, thank you so much!


#5

Thank you! I have never known we could check for errors in the code on the browser. I will definetly be using this. I am only in my 2 course of coding and we are in week 2. I really appreciate everyone taking the time to answer my question!


#6

You’re welcome :slight_smile:

As a side note, this address - http://127.0.0.1:11160/preview/app/index.html is a local address, which is accessible only in your private network. If you want to share with somebody your project you should use port forwarding and share the public address or you can use services like repl.it, jsfiddle or codepen :panda_face: