Pathing

HTML

<div id="forward"></div>
<div id="reverse"></div>
<br>
<div id="full_forward"></div>
<div id="full_reverse"></div>

CSS

body{ font-family: Arial, Helvetica, sans-serif; }

#forward:before, #reverse:before, #full_forward:before, #full_reverse:before{
  display: inline-block;
  margin-right: 1em;
  width: 4em;
}

#full_forward, #full_reverse{font-size: 0.7em; white-space: nowrap;}

#forward:before{ content: "Forward:"; }
#reverse:before{ content: "Reverse:"; }
#full_forward:before{ content: "Forward:"; }
#full_reverse:before{ content: "Reverse:"; }

JavaScript

// Enume of vectors
let vectors = {
	TOP: 1,
  TOP_RIGHT: 2,
  RIGHT: 3,
  BOTTOM_RIGHT: 4,
  BOTTOM: 5,
  BOTTOM_LEFT: 6,
  LEFT: 7,
  TOP_LEFT: 8,
};
_.extend(window, vectors); // Add them to global

// Lookup table for vectors
let dirMap = {
	1: 		{ 1: TOP_RIGHT, 0: RIGHT, "-1": BOTTOM_RIGHT },
  0: 		{ 1: TOP, "-1": BOTTOM, },
  "-1": { 1: TOP_LEFT, 0: LEFT, "-1": BOTTOM_LEFT }
};

// Get the direction key
function getDirection(a, b){
	return dirMap[b.x - a.x][a.y - b.y];
}

// Example path
let path = [   
	{x: 22, y: 30}, 
  {x: 22, y: 29}, 
  {x: 22, y: 28}, 
  {x: 23, y: 27}, 
  {x: 24, y: 26}, 
  {x: 25, y: 25}, 
  {x: 26, y: 25}, 
  {x: 27, y: 24},
  {x: 26, y: 23},
  {x: 27, y: 22},
  {x: 26, y: 22}
];

let strPath = "", 
		strInverted = "";

for(let i = 1, len = path.length; i < len; i++){
	let prev = path[i - 1];
	let direction = getDirection(prev, path[i]);
	let inverse = direction + (direction > 4 ? -4 : 4);
	strPath += direction;
	strInverted = inverse + strInverted;
}

console.log("Forward: ", strPath);
console.log("Reverse: ", strInverted);

document.getElementById("forward").innerHTML = strPath;
document.getElementById("reverse").innerHTML = strInverted;

// Just for debugging purposes
function getDirString(dirString){
	let arrDir = [];
  _.each(dirString, function(c){
  	let val = parseInt(c), dir = "";
    _.find(vectors, function(o, i){ if(o === val){ dir = i; return true; }});
    arrDir.push(dir);
	});
  return arrDir.join(", ");
}

document.getElementById("full_forward").innerHTML = getDirString(strPath);
document.getElementById("full_reverse").innerHTML = getDirString(strInverted);