Jump to content
Sign in to follow this  

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

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


There is a page referring to CSS Layout.... https://www.w3schools.com/css/css_align.asp


And heres another one on Canvas reference.... https://www.w3schools.com/tags/ref_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>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
    margin: auto;
    text-align: center;
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
<body onload="startGame()">
<div class="center">
  var myGamePiece;

  function startGame() {
      myGamePiece = new component(30, 30, "red", 10, 120);

  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() {
      if (myGameArea.x && myGameArea.y) {
          myGamePiece.x = myGameArea.x;
          myGamePiece.y = myGameArea.y;
<p>Move the cursor inside the canvas to move the red square.</p>

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); 


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.

Share this post

Link to post
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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...