I've implemented a bouncing ball using html5 canvas, but can't figure out how to make the ball rotate at the same time

问题

I'm trying to implement a bouncing element around the edges of the viewport. I've successfully implemented the bouncing mechanism, but can't figure out how to make it rotate accordingly. Any help is appreciated!

Fiddle

function Ball (radius, color) {
  if (radius === undefined) { radius = 50; }
  this.x = 0;
  this.y = 0;
  this.radius = radius;
  this.vx = 0;
  this.vy = 0;
  this.rotation = 0;
  this.scaleX = 1;
  this.scaleY = 1;
  this.color = "#000";
}

Ball.prototype.draw = function (context) {
  context.save();
  context.translate(this.x, this.y);
  context.textAlign = "center";
  context.beginPath();
  context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
  context.closePath();
  context.fill();

  context.fillStyle = "#ffffff";x
  context.font="12px Arial";
  context.fillText("Lorem Ipsum",0,0);
  context.restore();
};

来源：https://stackoverflow.com/questions/65500718/ive-implemented-a-bouncing-ball-using-html5-canvas-but-cant-figure-out-how-to