Rickie Posted March 11, 2019 Share Posted 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. Link to comment Share on other sites More sharing options...
Ingolme Posted March 11, 2019 Share Posted 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. 1 Link to comment Share on other sites More sharing options...
Rickie Posted March 12, 2019 Author Share Posted 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted March 12, 2019 Share Posted 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now