Try it Yourself: Graphics Canvas Game Basics

Graphics Canvas Game Basics

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<canvas id="game" width="480" height="320"></canvas>

<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

function update() {}
function draw() {}

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  update();
  draw();

  requestAnimationFrame(gameLoop);
}

requestAnimationFrame(gameLoop);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<canvas id="game" width="480" height="320"></canvas>

<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

function update() {}
function draw() {}

function gameLoop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  update();
  draw();

  requestAnimationFrame(gameLoop);
}

requestAnimationFrame(gameLoop);
</script>

</body>
</html>