Adding Javascript Game Into HTML Div

Question

I'm running into problems loading my JS game onto a div, which ultimately should show the game below the header, however it's showing below the footer instead. Anyone know how I can fix this? Thanks in advance. How It's Supposed to Look

JS FILE

var animate = window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  function(callback) { window.setTimeout(callback, 1000/60) };

var canvas = document.createElement('canvas');
var width = 400;
var height = 600;
canvas.width = width;
canvas.height = height;
var context = canvas.getContext('2d');
var topScore = 0;
var bottomScore = 0;
var game1 = document.getElementById("game");

window.onload = function() {
  document.body.appendChild(canvas);
  animate(step);

};

var step = function() {
  update();
  render();
  animate(step);
};

var update = function() {
};

var render = function() {
  context.fillStyle = "#ffd31d";
  context.fillRect(0, 0, width, height);
};

HTML FILE

 <div class="game"></div>
 <script src="pong.js"></script>

You are appending to the body with document.body.appendChild(canvas);. Append somewhere else. You may want to use parentElement.insertBefore(canvas, beforeNode);. — StackSlave
– StackSlave, Commented Jun 12, 2020 at 0:32

Matthew Howard · Accepted Answer · 2020-06-12 00:07:18Z

1

Instead of

document.body.appendChild(canvas);

you need to append it to the div

game1.appendChild(canvas);

appending it to the body will just add it after everything else on the page.

answered Jun 12, 2020 at 0:07

Matthew Howard

1791 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tate dewey Over a year ago

Thank you, I see the logic and that makes sense. However, it's still not appearing.

Matthew Howard Over a year ago

Do you have a git repo or another way to show me your code?

tate dewey Over a year ago

github.com/tatedewey/WildinOut Thanks for looking into it.

Collectives™ on Stack Overflow

Adding Javascript Game Into HTML Div

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related