JavaScript/HTML5 Canvas

Rickie · March 11, 2019

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.

Ingolme · March 11, 2019

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.

Rickie · March 12, 2019

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.

justsomeguy · March 12, 2019

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.

Sign In

JavaScript/HTML5 Canvas

Recommended Posts

Rickie

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Rickie

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity