CODEWITHSUNDEEP
javascripthtmlcss
tate dewey
tate dewey

Reputation: 13

Adding Javascript Game Into HTML Div

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>

Upvotes: 1

Views: 176

Answers (1)

Matthew Howard
Matthew Howard

Reputation: 179

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.

Upvotes: 1

Related Questions