h2ochip.com Posted March 29, 2019 Share Posted March 29, 2019 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. Link to comment Share on other sites More sharing options...
Ingolme Posted April 1, 2019 Share Posted April 1, 2019 The canvas behaves like an image, so you have to set the text-align of its parent, which is the body in your case. body { text-align: center; } The <script> tag is irrelevant, if I were you I would put it at the bottom of the page outside of all of the rest of the elements. 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