Rotating single image in canvas for game

Question

I'm trying to make a bird game in which I rotate just the single bird image that I am drawing through my game class (last function on the bottom). Is there any way to just rotate my bird at an angle of thirty degrees when it jumps and falls? I don't want to create another canvas just for my bird. Currently, nothing works unless I don't restore in the jump function.

class Bird extends Sprite {

constructor(options, game) {
super(options);
this.image = options.image;
this.sX = options.sX;
this.sY = options.sY;
this.sWidth = options.sWidth;
this.sHeight = options.sHeight;
this.dX = options.dX;
this.dY = options.dY;
this.dWidth = options.dWidth;
this.dHeight = options.dHeight;
this.frameIndex = 1;
this.tickCount = 0;
this.ticksPerFrame = 10;
this.numFrames = 8;
this.game = game;
this.birdRight = this.dX + this.dWidth;
}

jump(e, ctx) {

ctx.save();
ctx.translate(this.xPos + this.width / 2, this.yPos + this.height / 2);
ctx.rotate(this.dY * 15 * Math.PI / 360);
ctx.restore();
this.dY -= 40;
this.sX = 0;
}

fall(ctx) {
this.tickCount += 1;



if (this.tickCount > this.ticksPerFrame) {
  this.sX = 27;
  this.tickCount = 0;
}



if (this.dY < 450 ) {
  this.dY += 1.5;
} else {
  this.dY = this.dY;
}

// this.sX = (this.frameIndex * this.sWidth) / (this.numFrames);
}

draw(ctx) {
ctx.clearRect(0, 0, Game.DIM_X, Game.DIM_Y);
this.allObjects().forEach((object) => {
  object.draw(ctx);
});
}

Answer 1

Could do it with css.

Add a style attribute to the object which has a transform: rotate(30deg);

Answer 2

To rotate an image

// img is an image, canvas, or video element
// x,y where on the canvas the image center will be
// angle is radians with positive in clockwise 
function drawImageRotated(img,x,y,angle){
    ctx.setTransform(1,0,0,1,x,y); // set position of image center
    ctx.rotate(angle); // rotate
    ctx.drawImage(img,-img.width/2,-img.height/2); // draw image offset so its center is at x,y
    ctx.setTransform(1,0,0,1,0,0); // restore default transform
}

To rotate, scale, and include alpha value

// Note the function does not restore. This improves the speed of this function
// if you call it many times in a row as SetTransform overwrite any existing transform
// alpha is a value from 0 - 1
// scaleX is scale in image X direction
// scaleY is scale in image Y Direction.
// image is rotated and scaled about its center
// center of image is located at canvas pixel coords x,y
function drawImage(img,x,y,scaleX,scaleY,angle,alpha){
    if(!alpha) { return }
    ctx.globalAlpha = alpha        
    ctx.setTransform(scaleX,0,0,scaleY,x,y); // set position of image center
    ctx.rotate(angle); // rotate
    ctx.drawImage(img,-img.width/2,-img.height/2); // draw image offset so its center is at x,y
}

// same as above with cx,cy as the point of rotation
// cx,cy are in image pixels
function drawImageCenterAt(img,x,y,cx,cy,scaleX,scaleY,angle,alpha){
    if(!alpha) { return }
    ctx.globalAlpha = alpha
    ctx.setTransform(scaleX,0,0,scaleY,x,y); // set position of image center
    ctx.rotate(angle); // rotate
    ctx.drawImage(img,-cx,-cy); // draw image offset so its center is at cx,cy
}

All these function can render about 500-1000 medium sized images per 60th second on the average PC/Laptop