CODEWITHSUNDEEP
javascripthtml5-canvas
user5237115
user5237115

Reputation:

Javascript: My canvas is drawing nothing

i am making a basic game loop so i started with the basic cube exercise and i wrote the exemple below but it isn't working. i tried to see if there is something misspell but i could find nothing aparently.

<!DOCTYPE HTML>
<html>
<head>
<title>Game</title>
<style type="text/css">
#GameCanvas {
   background-color: #FF0000;
}
</style>
</head>
<body>
<canvas id="GameCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.findElementById("GameCanvas");
var graphics = canvas.getContext("2d");
function Update() {}
function Draw() {
graphics.beginPath();
graphics.fillRect(20, 20, 50, 50);
graphics.fillStyle = "#FFFFFF";
graphics.fill();
graphics.closePath();
}
function GameLoop() {
Update();
Draw();
requestAnimFrame(GameLoop);
}
requestAnimFrame(GameLoop);
</script>
</body>
</html>

Upvotes: 0

Views: 615

Answers (1)

IrkenInvader
IrkenInvader

Reputation: 4050

You have a couple bugs here, document.findElementById does not exist, change it to document.getElementById.

requestAnimFrame should be changed to requestAnimationFrame in both instances.

With these changes your loop runs and draws a square to the screen.

<!DOCTYPE HTML>
<html>
<head>
<title>Game</title>
<style type="text/css">
#GameCanvas {
   background-color: #FF0000;
}
</style>
</head>
<body>
<canvas id="GameCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("GameCanvas");
var graphics = canvas.getContext("2d");
function Update() {}
function Draw() {
  graphics.beginPath();
  graphics.fillRect(20, 20, 50, 50);
  graphics.fillStyle = "#FFFFFF";
  graphics.fill();
  graphics.closePath();
}
function GameLoop() {
  Update();
  Draw();
  requestAnimationFrame(GameLoop);
}
requestAnimationFrame(GameLoop);
</script>
</body>
</html>

Upvotes: 2

Related Questions