Canvas individual objects rotate and not all

Question

the rotate() function seems to rotate the whole drawing area. Is there a way to rotate paths individually?

I have an object that I foreache and then with the isPointInPath function I take the object where I clicked on i put this in the var data = '' and then I can do what I want with the object But now I want to rotate every object individually where I click on it

rotate function

$('.rotate').on('input', function() {
        data.rotate+=1;
        drawRotated(data.rotate);
    });           

    function drawRotated(degrees){
        var cx     = data.x + 0.5 * data.width;   // x of shape center
        var cy     = data.y + 0.5 * data.height;  // y of shape center 
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.translate(cx, cy);
        ctx.rotate(degrees*Math.PI/180);
        ctx.translate(-cx, -cy);
        drawAllShips()
    }

The object

function makeShip(x,y,width,height,fill){
        var ship={
          x:x,
          y:y,
          width:width,
          height:height,
          right:x+width,
          bottom:y+height,
          fill:fill,
          b1:0,
          b2:0,
          b1widthtop:0,
          b2width:0,
          b1Right:0,
          b2Left:0,
          b1widthright:0,
          b2widthleft:0,
          rotate:0
        }
        ships.push(ship);
        return(ship)
    }