nielsdoorn/index.html

## index.html
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Canvas animatie</title>
	<script src="script.js"></script>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<canvas id="animatie" width="640" height="480"></canvas>
</body>
</html>

## script.js
window.onload = init;

// variabelen
var canvas;

var x = 10;
var y = 10;

var left = false;
var right = false;
var up = false;
var down = false;

var speed = 2;

// init wordt eenmalig uitgevoerd om alles op te bouwen
function init() {
  // canvas opvragen uit DOM
  canvas = document.getElementById("animatie");

  // pijltjestoetsen afhandeling regelen...
  window.onkeydown = keydown;
  window.onkeyup = keyup;

  initAnimation();
}

function initAnimation() {
  // vraag aan de browser om maximaal 60 fps te animeren
  window.looper = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
      window.setTimeout(callback, 1000 / 60);
    };
  })();

  (function animatieLoop(){
    looper(animatieLoop);
    beweegBlokje();
    tekenFrame();
  })();
}

function beweegBlokje() {
  if (left) {
    x-=speed;
  } else if (right) {
    x+=speed;
  }
  if (down) {
    y+=speed;
  } else if (up) {
    y-=speed;
  }
}

// het tekenen van het scherm
function tekenFrame() {
  var ctx = canvas.getContext("2d");
  // 2d context leeg maken, het canvas is 800px breed en 640px hoog
  ctx.clearRect(0, 0, 800, 640);
  // vierkantje tekenen
  ctx.fillRect(x, y, 10, 10);
}

// pijltjes toetsen ingedrukt
function keydown(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) { // iedere toets heeft een eigen code...
    case 37:    // pijltje links is 37
      left = true;
      break;
    case 38:    // pijltje omhoog is 38...
      up = true;
      break;
    case 39:    // pijltje rechts
      right = true;
      break;
    case 40:    // pijltje omlaag
      down = true;
      break;
    }
}

// pijltjes toetsen losgelaten
function keyup(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) { // iedere toets heeft een eigen code...
    case 37:    // pijltje links is 37
      left = false;
      break;
    case 38:    // pijltje omhoog is 38...
      up = false;
      break;
    case 39:    // pijltje rechts
      right = false;
      break;
    case 40:    // pijltje omlaag
      down = false;
      break;
    }
}

## style.css
canvas {
	background-color: #999;
}
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Canvas animatie</title>
	<script src="script.js"></script>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<canvas id="animatie" width="640" height="480"></canvas>
	</body>
	</html>
	window.onload = init;

	// variabelen
	var canvas;

	var x = 10;
	var y = 10;

	var left = false;
	var right = false;
	var up = false;
	var down = false;

	var speed = 2;

	// init wordt eenmalig uitgevoerd om alles op te bouwen
	function init() {
	// canvas opvragen uit DOM
	canvas = document.getElementById("animatie");

	// pijltjestoetsen afhandeling regelen...
	window.onkeydown = keydown;
	window.onkeyup = keyup;

	initAnimation();
	}

	function initAnimation() {
	// vraag aan de browser om maximaal 60 fps te animeren
	window.looper = (function(callback){
	return window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function(callback){
	window.setTimeout(callback, 1000 / 60);
	};
	})();

	(function animatieLoop(){
	looper(animatieLoop);
	beweegBlokje();
	tekenFrame();
	})();
	}

	function beweegBlokje() {
	if (left) {
	x-=speed;
	} else if (right) {
	x+=speed;
	}
	if (down) {
	y+=speed;
	} else if (up) {
	y-=speed;
	}
	}

	// het tekenen van het scherm
	function tekenFrame() {
	var ctx = canvas.getContext("2d");
	// 2d context leeg maken, het canvas is 800px breed en 640px hoog
	ctx.clearRect(0, 0, 800, 640);
	// vierkantje tekenen
	ctx.fillRect(x, y, 10, 10);
	}

	// pijltjes toetsen ingedrukt
	function keydown(evt) {
	evt = evt \|\| window.event;
	switch (evt.keyCode) { // iedere toets heeft een eigen code...
	case 37: // pijltje links is 37
	left = true;
	break;
	case 38: // pijltje omhoog is 38...
	up = true;
	break;
	case 39: // pijltje rechts
	right = true;
	break;
	case 40: // pijltje omlaag
	down = true;
	break;
	}
	}

	// pijltjes toetsen losgelaten
	function keyup(evt) {
	evt = evt \|\| window.event;
	switch (evt.keyCode) { // iedere toets heeft een eigen code...
	case 37: // pijltje links is 37
	left = false;
	break;
	case 38: // pijltje omhoog is 38...
	up = false;
	break;
	case 39: // pijltje rechts
	right = false;
	break;
	case 40: // pijltje omlaag
	down = false;
	break;
	}
	}