Let's deal with one gotcha straightaway - the canvas doesn't resize when we we resize the browser window. Surprisingly easy to fix:

  <body onResize='setup();'>

I imagine the robot as being on an 8x8 grid always starting at the circled position.


I also imagine the robot having a compass heading ranging from 0 to 360.


Which leads to the follow additions to my JavaScript:

function home() {
  g_ctx.clearRect(0,0,g_side,g_side);
  g_x=g_x0; g_y=g_y0; g_h=0;
}
function setup() {
  g_side=45*vmin();
  var canvas=document.getElementById('c');
  canvas.width=g_side; canvas.height=g_side;
  g_ctx=canvas.getContext('2d');
  g_x0=g_side/2; g_y0=g_side*.75;
  g_step=g_side/8;
  home();
}

Note the clearRect command which is the simplest way to clear rhe canvas - rather like wiping down a whiteboard.