Display Arrows for Direction Keys

This JavaScript program demonstrates how to an arrow corresponding to a direction key presses on a canvas element. Make sure that the canvas has focus; there should be a red border on it when it has focus. Otherwise, the events will not be sent. Note that the functions calls to e.preventDefault() stop the window from scrolling when an arrow key is pressed.

DirectionKeyArrows.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's Javascript</title>
    <script type="text/javascript" src="DirectionKeyArrows.js"></script>
    <style>
    	.cFocus { border: 1px red solid; }
    	.cBlur { border: none; }
    </style>
  </head>
  <body onload="Initialize()">
    <canvas id="idCanvas" width="640" height ="480" style="background-color: #F0F0F0;"></canvas>
  </body>
</html>

DirectionKeyArrows.js

var gqContext2D = null;

function Initialize() {
	var qCanvas = document.getElementById("idCanvas");
	gqContext2D = qCanvas.getContext("2d");
	window.onkeydown=KeyDownFunction;
	window.onkeyup=KeyUpFunction;
	window.addEventListener("focus", FocusFunction);
	window.addEventListener("blur", BlurFunction);
	window.focus();
	FocusFunction();
}

function FocusFunction() {
	document.getElementById("idCanvas").className ='cFocus';
}

function BlurFunction() {
	document.getElementById("idCanvas").className ='cBlur';
}

function KeyUpFunction(e) {
	gqContext2D.clearRect(0, 0, 640, 480);
}

function KeyDownFunction(e) {
	var iKeyUp = 38;
	var iKeyLeft = 37;
	var iKeyRight = 39;
	var iKeyDown = 40;
	var iKeyCode = 0;
	if (e) {
		iKeyCode = e.which;
	} else {
		iKeyCode = window.event.keyCode;
	}
	gqContext2D.clearRect(0, 0, 640, 480);
	gqContext2D.fillStyle = "lightgray";
	switch (iKeyCode) {
		case iKeyUp: {
			gqContext2D.beginPath();
      		gqContext2D.moveTo(220, 100);
      		gqContext2D.lineTo(320, 0);
      		gqContext2D.lineTo(420, 100);
      		gqContext2D.closePath();
      		gqContext2D.fill();
      		gqContext2D.fillRect(260, 100, 120, 279);
      		// Prevent the window scrolling
      		e.preventDefault();
			break;
		}
		case iKeyLeft: {
			gqContext2D.beginPath();
      		gqContext2D.moveTo(100, 140);
      		gqContext2D.lineTo(0, 240);
      		gqContext2D.lineTo(100, 340);
      		gqContext2D.closePath();
      		gqContext2D.fill();
      		gqContext2D.fillRect(100, 180, 439, 120);
      		// Prevent the window scrolling
      		e.preventDefault();
			break;
		}
		case iKeyRight: {
			gqContext2D.beginPath();
      		gqContext2D.moveTo(539, 140);
      		gqContext2D.lineTo(639, 240);
      		gqContext2D.lineTo(539, 340);
      		gqContext2D.closePath();
      		gqContext2D.fill();
      		gqContext2D.fillRect(100, 180, 439, 120);
      		// Prevent the window scrolling
      		e.preventDefault();
			break;
		}
		case iKeyDown: {
			gqContext2D.beginPath();
      		gqContext2D.moveTo(220, 379);
      		gqContext2D.lineTo(320, 479);
      		gqContext2D.lineTo(420, 379);
      		gqContext2D.closePath();
      		gqContext2D.fill();
      		gqContext2D.fillRect(260, 100, 120, 279);
      		// Prevent the window scrolling
      		e.preventDefault();
			break;
		}
		default: {
			break;
		}
	}
}

Canvas JavaScript

Display Arrows for Direction Keys

DirectionKeyArrows.html

DirectionKeyArrows.js

Output