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 .
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.
How do you center/position a <script></script> within HTML5?
in Critiques
Posted
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.