h2ochip.com
-
Content Count
1 -
Joined
-
Last visited
-
h2ochip.com joined the community
-
How do you center/position a <script></script> within HTML5?
h2ochip.com posted a topic in Critiques
I have spent many hours (over many days) trying to find out how to align a <script></script> within HTML5 specifically one that creates a canvas using . There is a page referring to centering images... https://www.w3schools.com/howto/howto_css_image_center.asp useless! There is a page referring to CSS Layout.... https://www.w3schools.com/css/css_align.asp useless! And heres another one on Canvas reference.... https://www.w3schools.com/tags/ref_canvas.asp useless! https://www.w3schools.com/tags/tag_canvas.asp useless! https://www.w3schools.com/tags/tag_script.asp useless! https://www.w3schools.com/html/html5_canvas.asp also useless! This is so basic a feature you would think that there would be examples of this in some of your examples. but no! Here is the code I have been trying to center.....as you can see I have tried quite a few different methods. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; margin: auto; text-align: center; object-position:center } .center { display: block; margin-left: auto; margin-right: auto; width: 50%; } </style> </head> <body onload="startGame()"> <div class="center"> <script> var myGamePiece; function startGame() { myGamePiece = new component(30, 30, "red", 10, 120); myGameArea.start(); } var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 800; this.canvas.height = 600; this.canvas.x = 100; this.canvas.y = 50; this.canvas.style.cursor = "none"; //hide the original cursor this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.interval = setInterval(updateGameArea, 20); window.addEventListener('mousemove', function (e) { myGameArea.x = e.pageX; myGameArea.y = e.pageY; }) }, clear : function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } function component(width, height, color, x, y) { this.width = width; this.height = height; this.speedX = 0; this.speedY = 0; this.x = x; this.y = y; this.update = function() { ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); } } function updateGameArea() { myGameArea.clear(); if (myGameArea.x && myGameArea.y) { myGamePiece.x = myGameArea.x; myGamePiece.y = myGameArea.y; } myGamePiece.update(); } </script> </div> <p>Move the cursor inside the canvas to move the red square.</p> </body> </html> Please can you place more references to alignment as this issue has become somewhat annoying considering how easy this is in p5 javascript for instance. In p5 its - var canvas = createCanvas(1000, 350); canvas.position(x,y); So please make some kind of reference to centering js and <script> in some of the other pages using the term center, like <center> (yes I know its deprecated - but what are the alternatives?) as the search for this info is rather long. Thankyou in advance.