The answer is to create a second canvas which sits on top of the first and to use this second canvas just for the robot image.

But how to make it sit on top? Simple! Use a grid like we did in Project 6.

index.html
<html>
  <head>
    <title>Spirolaterals</title>
    <link rel='stylesheet' href='styles.css'>
    <script src='globals.js'></script>
    <script src='my.js'></script>
  </head>
  <body onResize='setup();'>
    <div id='canvasses'>
      <canvas id='c'></canvas>
      <canvas id='robot'></canvas>
    </div>
    <script>setup(); setTimeout(test,500);</script>
  </body>
</html>
styles.css
#canvasses {
  display:grid;
}
#c, #robot {
  border:1vmin groove gold;
  grid-row:1;
  grid-column:1;
}