Jump to content

Rickie

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by Rickie

    JavaScript/HTML5 Canvas

    in JavaScript

    Posted

    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.

    JavaScript/HTML5 Canvas

    in JavaScript

    Posted

    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.

×
×
  • Create New...