Jump to content

JavaScript/HTML5 Canvas


Rickie
 Share

Recommended Posts

Hi,

I've been doing a few tutorials for creating a canvas and I have came across 2 ways in doing this and hoping someone may be able to explain why you would do over one way instead of the other.

 

W3SCHOOLS tutorial:

 

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Mazing</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body onload="startMazeGame()">
  
<script>

  function startMazeGame() {
    mazeArea.start();
  }

  var mazeArea = {
    canvas : document.createElement("canvas"),
    start : function() {
      this.canvas.width = 500;
      this.canvas.height = 500;
      this.context = this.canvas.getContext("2d");
      document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    }
  }

</script>

</body>
</html>

 

Various tutorials show it done this way, including Mozilla ballgame guide:

<!DOCTYPE html>
<html>
	<head>
	
		<title>Game</title>
		<meta charset="UTF-8"/>
		
	<style>
		
		* {
		padding: 0;
		margin: 5;
		}
		
		canvas {
		margin: 0 auto;
		display: block;
		background: #eeee;
		}
			
	</style>
	</head>
	
	<body>
	
		<canvas id="myCanvas" width="480" height="330"></canvas>
	
	<script>
	
		var canvas = document.getElementById("myCanvas");
		var ctx = canvas.getContext("2d");
	
	</script>
	</body>
<html>

Many thanks.

Link to comment
Share on other sites

I personally would avoid the first way just because it's using an onload HTML attribute.

As far as choosing whether to create the canvas with Javascript or have it right in the HTML, it doesn't make a big difference. You might want to not have a canvas on the page when Javascript is disabled and show something else instead.

  • Thanks 1
Link to comment
Share on other sites

12 hours ago, Ingolme said:

I personally would avoid the first way just because it's using an onload HTML attribute.

As far as choosing whether to create the canvas with Javascript or have it right in the HTML, it doesn't make a big difference. You might want to not have a canvas on the page when Javascript is disabled and show something else instead.

Thank you for your response.

I am curious to know more about why you wouldn't recommend the first one because of the onload HTML attribute? The first one is from W3SCHOOLS tutorial and I tend to think most of the time W3SCHOOLS would show the best ways for learners.

Link to comment
Share on other sites

It's just an old way to do it, the more modern way is to use addEventListener to attach handlers:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

The tutorial shows using event attributes because it's the easiest to understand.

In the case of using a load handler on the body, the common alternative is to just move the code that you would want to run after the body loads to the end of the body instead of using a load handler.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...