How to turn the car when pressing left or right key

Question

I am new to canvas and developing a game where a car moves straight and now I want to turn the car to anti clockwise when the left key is pressed and clockwise when right key is pressed.

Currently I am trying with

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");




 function drawSprite(image, x, y, scale = 1,angle = 0){
    ctx.setTransform(scale, 0, 0, scale, x, y); // set scale and center of sprite
    ctx.rotate(angle);
    ctx.drawImage(image,- image.width / 2, - image.height / 2);
    ctx.setTransform(1,0,0,1,0,0); // restore default transform
                                   // if you call this function many times
                                   // and dont do any other rendering between
                                   // move the restore default line
                                   // outside this function and after all the
                                   // sprites are drawn. 
}
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
    heroReady = true;
};
heroImage.src = "images/car.png";
  if (37 in keysDown) { // Player holding left
  drawSprite(heroImage, hero.x, hero.y, scale = 1,angle = 90);    
}

But this does not work at all.I only want the car to be turned and not the screen.Any help is appreciated. My source code: working pen In case the above code is not enough you may look into to the below one game.js

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 1024;
canvas.height = 1024;
document.body.appendChild(canvas);
function drawSprite(image, x, y, scale = 1,angle = 0){
    ctx.setTransform(scale, 0, 0, scale, x, y); // set scale and center of sprite
    ctx.rotate(angle);
    ctx.drawImage(image,- image.width / 2, - image.height / 2);
    ctx.setTransform(1,0,0,1,0,0); // restore default transform
                                   // if you call this function many times
                                   // and dont do any other rendering between
                                   // move the restore default line
                                   // outside this function and after all the
                                   // sprites are drawn. 
}
// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
    bgReady = true;
};
bgImage.src = "http://res.cloudinary.com/dfhppjli0/image/upload/v1491958481/road_lrjihy.jpg";

// Hero image
var heroReady = false;

var heroImage = new Image();
heroImage.onload = function () {
    heroReady = true;
};
heroImage.src = "http://res.cloudinary.com/dfhppjli0/image/upload/c_scale,w_32/v1491958999/car_p1k2hw.png";



//Second Taxi
var heroReady3 = false;
var heroImage3 = new Image();
heroImage3.onload = function () {
    heroReady3 = true;
};
heroImage3.src = "images/taxi3.png";


var heroswitchobj = false;
var heroSwitch = new Image();
heroSwitch.onload = function () {
    heroswitchobj = true;
};
heroSwitch.src = "images/taxi9.png";


var heroswitchobj3 = false;
var heroSwitch3 = new Image();
heroSwitch3.onload = function () {
    heroswitchobj3 = true;
};
heroSwitch3.src = "images/taxi9.png";



/*
for(i=0;i<3;i++){

var str="heroReady";
var strImage="heroImage";

str=str1.concat(i);
var str = false;
var heroImage = new Image();
heroImage.onload = function () {
    heroReady = true;
};
heroImage.src = "images/taxi.png";


}
*/

// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
    monsterReady = true;
};
monsterImage.src = "http://res.cloudinary.com/dfhppjli0/image/upload/v1491959220/m_n1rbem.png";



var monsterReady3 = false;
var monsterImage3 = new Image();
monsterImage3.onload = function () {
    monsterReady3 = true;
};
monsterImage3.src = "http://res.cloudinary.com/dfhppjli0/image/upload/v1491959220/m_n1rbem.png";


var monsterReady9 = false;
var monsterImage9 = new Image();
monsterImage9.onload = function () {
    monsterReady9 = true;
};
monsterImage9.src = "http://res.cloudinary.com/dfhppjli0/image/upload/v1491959220/m_n1rbem.png";




var monsterReady12 = false;
var monsterImage12 = new Image();
monsterImage12.onload = function () {
    monsterReady12 = true;
};
monsterImage12.src = "http://res.cloudinary.com/dfhppjli0/image/upload/v1491959220/m_n1rbem.png";



// Game objects
var hero = {
    speed: 256 // movement in pixels per second
};
var hero3 = {
    speed: 256 // movement in pixels per second
};
var herochange = {
    speed: 256 // movement in pixels per second
};
var hero3change = {
    speed: 256 // movement in pixels per second
};
function drawRotated(degrees){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(canvas.width/2,canvas.height/2);
    ctx.rotate(degrees*Math.PI/180);
    ctx.drawImage(image,-image.width/2,-image.width/2);
    ctx.restore();
}

var monster = {};
var monster3 = {};
var monster9 = {};
var monster12 = {};

var monstersCaught = 0;

// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
    delete keysDown[e.keyCode];
}, false);
var count=0;
// Reset the game when the player catches a monster
var reset = function () {


    hero.x = canvas.width / 2;
    hero.y = canvas.height / 2;




    hero3.x = canvas.width / 1.5;
    hero3.y = canvas.height / 1.5;



    // Throw the monster somewhere on the screen randomly
    monster.x = 32 + (Math.random() * (canvas.width - 64));
    monster.y = 32 + (Math.random() * (canvas.height - 64));


    monster3.x = 32 + (Math.random() * (canvas.width - 64));
    monster3.y = 32 + (Math.random() * (canvas.height - 64));

    monster9.x = 32 + (Math.random() * (canvas.width - 64));
    monster9.y = 32 + (Math.random() * (canvas.height - 64));
    monster12.x = 32 + (Math.random() * (canvas.width - 64));
    monster12.y = 32 + (Math.random() * (canvas.height - 64));
};


var reset_monster_only= function (s) {


if(s==1){

}
/*        if(heroswitchobj){
        ctx.drawImage(herochange, hero.x, hero.y);

        }


        if(heroswitchobj3){

        ctx.drawImage(herochange3, hero3.x, hero3.y);
        }
*/




    monster.x = 32 + (Math.random() * (canvas.width - 64));
    monster.y = 32 + (Math.random() * (canvas.height - 64));


    monster3.x = 32 + (Math.random() * (canvas.width - 64));
    monster3.y = 32 + (Math.random() * (canvas.height - 64));

    monster9.x = 32 + (Math.random() * (canvas.width - 64));
    monster9.y = 32 + (Math.random() * (canvas.height - 64));
    monster12.x = 32 + (Math.random() * (canvas.width - 64));
    monster12.y = 32 + (Math.random() * (canvas.height - 64));
};


var angleInDegrees=0;

// Update game objects
var update = function (modifier) {

        hero.y -= hero.speed * modifier;
        hero3.y += hero3.speed * modifier;






    if (38 in keysDown) { // Player holding up
        hero.y -= hero.speed * modifier;
        hero3.y += hero3.speed * modifier;
    }
    if (40 in keysDown) { // Player holding down
        hero.y += hero.speed * modifier;
        hero3.y -= hero3.speed * modifier;
    }
    if (37 in keysDown) { // Player holding left

        //ctx.clearRect(0,0,canvas.width,canvas.height);
        //ctx.save();

     drawSprite(heroImage, x, y, scale = 1,angle = 90)
       //drawRotated(angleInDegrees);
        //hero.x=hero.y;
        //hero.y=hero.y-32;
        //hero.x -= hero.speed * modifier;
        //hero3.x += hero3.speed * modifier;
    }
    if (39 in keysDown) { // Player holding right
        //hero.x += hero.speed * modifier;
        //hero3.x -= hero3.speed * modifier;
    }

    // Are they touching?
    if (
        hero.x <= (monster.x + 32) 
        && monster.x <= (hero.x + 32)
        && hero.y <= (monster.y + 32)
        && monster.y <= (hero.y + 32)
    ) {
        ++monstersCaught;
        reset_monster_only(1);
    }


if (
        hero3.x <= (monster.x + 32)
        && monster.x <= (hero3.x + 32)
        && hero3.y <= (monster.y + 32)
        && monster.y <= (hero3.y + 32)
    ) {
        ++monstersCaught;
        reset_monster_only(2);
    }


   if (
        hero3.x <= (monster3.x + 32)
        && monster3.x <= (hero3.x + 32)
        && hero3.y <= (monster3.y + 32)
        && monster3.y <= (hero3.y + 32)
    ) {
        ++monstersCaught;
        reset_monster_only(3);
    }


if (
        hero.x <= (monster3.x + 32)
        && monster3.x <= (hero.x + 32)
        && hero.y <= (monster3.y + 32)
        && monster3.y <= (hero.y + 32)
    ) {
        ++monstersCaught;
        reset_monster_only(4);
    }

if (
        hero.x <= (monster9.x + 32) 
        && monster9.x <= (hero.x + 32)
        && hero.y <= (monster9.y + 32)
        && monster9.y <= (hero.y + 32)
    ) {
        ++monstersCaught;
        reset_monster_only(5);
    }


if (
        hero3.x <= (monster9.x + 32)
        && monster9.x <= (hero3.x + 32)
        && hero3.y <= (monster9.y + 32)
        && monster9.y <= (hero3.y + 32)
    ) {
        ++monstersCaught;
        reset_monster_only(6);
    }
    if (
        hero.x <= (monster12.x + 32) 
        && monster12.x <= (hero.x + 32)
        && hero.y <= (monster12.y + 32)
        && monster12.y <= (hero.y + 32)
    ) {
        ++monstersCaught;
        reset_monster_only(7);
    }


if (
        hero3.x <= (monster12.x + 32)
        && monster12.x <= (hero3.x + 32)
        && hero3.y <= (monster12.y + 32)
        && monster12.y <= (hero3.y + 32)
    ) {
        ++monstersCaught;
        reset_monster_only(8);
    }

if (hero3.x >= (canvas.width)   || hero3.y >= (canvas.height)) {

        reset();
    }
if (hero.x >= (canvas.width) || hero.y >= (canvas.height)) {

        reset();
    }



};

// Draw everything
var render = function () {
    if (bgReady) {
        ctx.drawImage(bgImage, 0, 0);
    }

    if (heroReady) {
        ctx.drawImage(heroImage, hero.x, hero.y);
        ctx.drawImage(heroImage, hero3.x, hero3.y);
    }

    if (monsterReady) {
        ctx.drawImage(monsterImage, monster.x, monster.y);
        ctx.drawImage(monsterImage3, monster3.x, monster3.y);
        ctx.drawImage(monsterImage9, monster9.x, monster9.y);
        ctx.drawImage(monsterImage12, monster12.x, monster12.y);
    }

    // Score
    ctx.fillStyle = "rgb(250, 250, 250)";
    ctx.font = "24px Helvetica";
    ctx.textAlign = "left";
    ctx.textBaseline = "top";
    ctx.fillText("Points: " + monstersCaught, 32, 32);
};








// The main game loop
var main = function () {
    var now = Date.now();
    var delta = now - then;
setTimeout(update(delta/1000), 10000);
    //update(delta / 1000);
    render();

    then = now;

    // Request to do this again ASAP
    requestAnimationFrame(main);
};

// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

// Let's play this game!
var then = Date.now();
reset();
main();

Edit:I updated the working pen and the main objective I am trying is to get the car moved whenever it is turned left or right

Answer 1

You have to save the context of the canvas and reload it after you draw the sprite:

ctx.save();
// Rotate the canvas and draw the sprite here
ctx.restore();

You also don't need to reset the transform if you do this.

Additional notes:

You don't need to reference requestAnimationFrame with window.requestAnimationFrame. Everything in the window object is available globally.