Using arrows on the keyboard, how do I control the location of an image on a background image?

JavaScript
1

Given:

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport", content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="image.css">
       <script src="image.js"></script>
    </head>
    <body>
        <!-- a <div> section in a document that is styled with CSS: -->
        <!-- canvasContainer can hold a number of child FrameworkElements that 
              works well within a CanvasContentHost -->
        <div id="canvasContainer">
            <!-- the HTML "canvas" element is used to draw graphics, on the 
                   fly, via JavaScript -->
            <canvas id="canvas" width="900" height="520"></canvas>
            </div>
    </body>
</html>

body{
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    /* px units are used for absolute values, while em is relative 
        to the font size of the particular element */
    #canvasContainer {
        display: flex;
        justify-content: center;
        margin: 1.250em;
      }
}

let Canvas, Context;
document.addEventListener('DOMContentLoaded', (ev) => 
    {
        // the 'canvas' element has two attributes, width and height.
        Canvas = document.getElementById('canvas');
        // use getContext('2d') to get the canvas 2D rendering context
        Context = Canvas.getContext('2d');
        Canvas.width = 600;
        // height will be reset based on aspect ratio
        Canvas.height = 300;
        //---
        let BackgroundImage = new Image();
        BackgroundImage.onload = function () {
            let BackgroundWidth = Canvas.width;
            // naturalWidth equals the density-corrected width of the image in CSS pixels. 
            // naturalHeight equals the density-corrected height of the image in CSS pixels. 
            // calculate the aspect ratio of the image
            let AspectRatio = BackgroundImage.naturalWidth / BackgroundImage.naturalHeight;
            // set canvas height per the aspect ratio
            let BackgroundHeight = Canvas.height = BackgroundWidth / AspectRatio; 
            //---
            // draw background with adjusted width and height
            Context.drawImage(BackgroundImage, 0, 0, BackgroundWidth, BackgroundHeight); 
            //---
            // draw the front image on top of the Background
            let FrontImage = new Image();
            FrontImage.onload = function () {
                let FrontWidth = 40; 
                let FrontHeight = 100; 
                // x and y coordinates of the front image top-left corner                 
                let PositionX = BackgroundWidth / 2 - FrontWidth / 2; 
                let PositionY = BackgroundHeight - FrontHeight; 
                Context.drawImage(FrontImage, PositionX, PositionY, FrontWidth, FrontHeight);
            }
            // replace part of Background with the front image
            FrontImage.src = "Car.jpg"; 
        }
        // background image
        BackgroundImage.src = "Streets.jpg";
    }
)

Streets.jpg => https://snipboard.io/4YgDaf.jpg
Car.jpg => https://snipboard.io/ptkWjJ.jpg

Using arrows on the keyboard, how do I control the location of an image on a background image?

2

This code places a car image on a street image. It displays correctly. I want to add code so the car can be moved along the street and make a left hand turn at the intersection.

Using arrows on the keyboard, how do I control the location of the car image on a background street image?

4

I was given an answer on StackOverflow - https://stackoverflow.com/questions/77166933/using-arrows-on-the-keyboard-how-do-i-control-the-location-of-an-image-on-a-bac.