Canvas - requestAnimationFrame

by parksd

HTML

<canvas id="canvas"></canvas>

CSS

html,body {
  padding:0;
  margin:0;
  height:100%;
}

#canvas {
  width: 100%;
  height:100%;
}

JavaScript

var x = 0,
  y = 0,
  xdir = 1,
  ydir = 1;

function drawIt() {
  window.requestAnimationFrame(drawIt);
  var canvas = document.getElementById('canvas');
  var c = canvas.getContext('2d');
  c.clearRect(0, 0, canvas.width, canvas.height);
  c.fillStyle = "red";
  c.fillRect(x, y, 30, 30);
  x += xdir;
  y += ydir;
  if (x <= 0 || x + 30 >= canvas.width) xdir = -1 * xdir;
  if (y <= 0 || y + 30 >= canvas.height) ydir = -1 * ydir;
}

//window.requestAnimationFrame(drawIt);
drawIt();