Jump to content

How do you center/position a <script></script> within HTML5?


h2ochip.com

Recommended Posts

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...