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.