[Всемогущий]

Как здесь надо изменить код так чтобы повернулся только один из четырех прямоугольников?. p.s: в хтмл добавьте элемент <canvas>.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var health = 40;
var x = 100;	
var y = 110;
var xy = 280;
var cvet = ["white","red"];
var okraska = ["white","black"];
var base = { 
 
color:"#48260D",
x:100,
y:100,
height:40,
width:40,
description:"base,"
};
console.log(base.color);
 function rotate(){
ctx.rotate(20 * Math.PI / 180);
//ctx.translate(base.x,base.y);
//ctx.fillRect(base.x+200,base.y+300,base.height,base.width);

ctx.fillStyle = "black";

//ctx.fillRect(base.x+210,base.y+310,base.height-20,base.width-20);
 
 }
function draw(x, y) {
   
ctx.fillStyle = "black";
ctx.fillRect(x,y,20,20);
console.log(x);

  //ctx.drawImage(imagesi,x,y,40,40);
 ctx.fillStyle = base.color;
 
ctx.fillRect(base.x, base.y, base.height,base.width);
 
ctx.fillRect(base.x+200,base.y, base.height,base.width);
 

ctx.fillRect(base.x+200,base.y+300,base.height,base.width);

ctx.fillStyle = "black";

ctx.fillRect(base.x+210,base.y+310,base.height-20,base.width-20);

if( health > 0){ctx.fillStyle = cvet[1];ctx.strokeStyle = okraska[1];} else{ ctx.fillStyle = cvet[0];ctx.strokeStyle = okraska[0];}
ctx.fillRect(100,85,40,10);
ctx.fillRect(300,85,health,10);



if(x > 260){ 
x--; 
this.x--; 
ctx.fillStyle = "black";
ctx.fillRect(xy,115,7,4);
xy+=1;
if(xy > 300){ xy = 262; this.xy = 262; this.health-=5;   }


ctx.strokeRect(100,85,40,10);
ctx.strokeRect(300,85,40,10);
}
}

function move() {
 x+=1;
  
}

function game() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       move();
       draw(x, y);
       requestAnimationFrame(game)
  
}

 

var imagesi = new Image();
imagesi.onload = game;
imagesi.src="tank.png";



 rotate();