How do I keep an image rotated?

//------------------------------
const cCanvas = document.getElementById('canvas');
  cCanvas.width = 600;
  cCanvas.height = 300;

const cContext = cCanvas.getContext('2d');

const cBackgroundImage = new Image();
const cBackgroundWidth = cCanvas.width;
let lBackgroundHeight; 

const cCarImage = new Image();
const cCarImageWidth = 40; 
const cCarImageHeight = 100; 
let lCarTopLeftX; 
let lCarTopLeftY; 
let lRotateFlag = false;
//------------------------------
//------------------------------
document.addEventListener('DOMContentLoaded', (ev) => 
  {
    cBackgroundImage.onload = function ()
    {
      cCarImage.onload = function () 
      {
        const cAspectRatio = cBackgroundImage.naturalWidth / cBackgroundImage.naturalHeight;
        lBackgroundHeight = cCanvas.height = cBackgroundWidth / cAspectRatio; 
        cContext.drawImage(cBackgroundImage, 0, 0, cBackgroundWidth, lBackgroundHeight); 
        lCarTopLeftX = cBackgroundWidth / 2 - cCarImageWidth / 2; 
        lCarTopLeftY = lBackgroundHeight / 2 - cCarImageHeight / 2; 
        cContext.drawImage(cCarImage, lCarTopLeftX, lCarTopLeftY, cCarImageWidth, cCarImageHeight);
      }
      cCarImage.src = "Car.jpg"; 
    }
    cBackgroundImage.src = "Streets.jpg";
  }
)//document.addEventListener('DOMContentLoaded'
//------------------------------
//------------------------------
document.body.addEventListener("keydown", e =>
  {
    let lFlag = true;
    e.preventDefault();
    switch(e.key){
      case 'ArrowUp':
        lCarTopLeftY -= 10;
        break;
      case 'ArrowDown':
        lCarTopLeftY += 10;
        break;
      case 'ArrowLeft':
        lCarTopLeftX -= 10;
        break;
      case 'ArrowRight':
        lCarTopLeftX += 10;
        break;
      case 'r':
        lRotateFlag = true;
        break;       
      default:
        lFlag = false;
        break;
    }
   if (lFlag === true)
    {
      render();      
    }
    lRotateFlag = false;
  }
)//document.body.addEventListener("keydown"
//------------------------------
//------------------------------
function render() {
  cContext.clearRect(0, 0, cCanvas.width, cCanvas.height);
  cContext.drawImage(cBackgroundImage, 0, 0, cBackgroundWidth, lBackgroundHeight);
  if(lRotateFlag === false) {
    cContext.drawImage(cCarImage, lCarTopLeftX, lCarTopLeftY, cCarImageWidth, cCarImageHeight);
  }
  else {
    let lRadians = Math.PI / 180 * 45;
    let lCarCenterX = lCarTopLeftX + cCarImageWidth / 2;
    let lCarCenterY = lCarTopLeftY + cCarImageHeight / 2;  
    cContext.translate(lCarCenterX, lCarCenterY);
    cContext.rotate(lRadians);
    cContext.drawImage(cCarImage, -cCarImageWidth / 2, -cCarImageHeight / 2, cCarImageWidth, cCarImageHeight);
    cContext.rotate(-lRadians);
    cContext.translate(-lCarCenterX, -lCarCenterY);    
  } 
}//render

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

This code places a car on street image — https://snipboard.io/uEv7cq.jpg

Entering the keyboard up arrow twice moves the car up two spaces — https://snipboard.io/04Ipzr.jpg

Entering the keyboard letter “r” rotates the image 45 degree — https://snipboard.io/v59buC.jpg

Entering the keyboard up arrow removes the car rotation — https://snipboard.io/N7D5E4.jpg

How do I keep the car rotation when I hit the up arrow key again?

You’re clearing the rotate flag on every key press after you render

if (lFlag === true)
    {
      render();      
    }
    lRotateFlag = false;

If you want to keep the rotation, don’t clear the flag.

2 Likes

kicken, I eliminated the flags, and

 cContext.drawImage(cCarImage, lCarTopLeftX, lCarTopLeftY, cCarImageWidth, cCarImageHeight);

All movement is controlled by

cContext.rotate(lRadians)

A simple solution. Thanks!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.