How can I stop canvas from adding onto the rotation? - rotation

Question

I'm trying to get a rectangle to rotate 10 degrees counterclockwise, in a game loop. I want the box to only rotate 10 degrees. Not add another 10 degrees on the next loop, because that's what it's doing:
First iteration of Game Loop
Second Iteration of Game Loop
Here is my current draw function:
...
class Bok {
static width = 17;
static height = 12;
constructor(position) {
this.position = position;
}
draw() {
...
ctx.beginPath();
ctx.rect(this.position.x, this.position.y, 17, 12);
ctx.fillStyle = "red";
ctx.strokeStyle = "black";
ctx.lineWidth = 10;
ctx.translate(this.position.x + Bok.width / 2, this.position.y + Bok.height / 2);
// this keeps adding 10 degrees to the box every update,
// how can i rotate it 10 degrees without adding on to the
// previous rotation?
ctx.rotate(10);
ctx.translate(-(this.position.x + Bok.width / 2), -(this.position.y + Bok.height / 2));
ctx.stroke();
ctx.fill();
...
}
...

Answer 1

First, looking at your code it seems you got confused on how the API works.
You need to transform the context before you draw (define) the path.
Now, there are many ways to not accumulate transformations:
The long way: perform the inverse transformation.
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const duration = 5000;
const cx = 150;
const cy = 80;
const start = performance.now();
function draw( time ) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const delta = ((start - time) % duration) / duration;
ctx.translate( cx, cy );
ctx.rotate( Math.PI * 2 * delta );
ctx.translate( -cx, -cy );
ctx.strokeRect( cx - 20, cy - 40, 40, 80 );
// inverse
ctx.translate( cx, cy );
ctx.rotate( Math.PI * 2 * delta * -1);
ctx.translate( -cx, -cy );
// an horizontal line
ctx.fillRect(0, 80, canvas.width, 5);
requestAnimationFrame( draw );
}
requestAnimationFrame( draw );
<canvas></canvas>
The short but slow way, save() before drawing and restore() after. But this will save and restore every properties of your canvas context, which may be an overkill.
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const duration = 5000;
const cx = 150;
const cy = 80;
const start = performance.now();
function draw( time ) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const delta = ((start - time) % duration) / duration;
ctx.save();
ctx.translate( cx, cy );
ctx.rotate( Math.PI * 2 * delta );
ctx.translate( -cx, -cy );
ctx.strokeRect( cx - 20, cy - 40, 40, 80 );
ctx.restore();
// an horizontal line
ctx.fillRect(0, 80, canvas.width, 5);
requestAnimationFrame( draw );
}
requestAnimationFrame( draw );
<canvas></canvas>
The clean way: reset your context transform to an identity matrix.
This may look a bit more complicated, but when your code will grow and you'll have a lot objects to manage, having them all relative to the identity matrix will save you from a lot of troubles.
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const duration = 5000;
const cx = 150;
const cy = 80;
const start = performance.now();
function draw( time ) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const delta = ((start - time) % duration) / duration;
ctx.translate( cx, cy );
ctx.rotate( Math.PI * 2 * delta );
ctx.translate( -cx, -cy );
ctx.strokeRect( cx - 20, cy - 40, 40, 80 );
// clear to identity transform
ctx.setTransform(1, 0, 0, 1, 0 ,0);
// an horizontal line
ctx.fillRect(0, 80, canvas.width, 5);
requestAnimationFrame( draw );
}
requestAnimationFrame( draw );
<canvas></canvas>

Answer 2

The simplest solution would be to make a trigger for it.
class Bok {
static width = 17;
static height = 12;
constructor(position) {
this.position = position;
this.rotated = false;
}
draw() {
...
ctx.beginPath();
ctx.rect(this.position.x, this.position.y, 17, 12);
ctx.fillStyle = "red";
ctx.strokeStyle = "black";
ctx.lineWidth = 10;
ctx.translate(this.position.x + Bok.width / 2, this.position.y + Bok.height / 2);
if (!this.rotated) {
ctx.rotate(10);
this.rotated = true;
}
ctx.translate(-(this.position.x + Bok.width / 2), -(this.position.y + Bok.height / 2));
ctx.stroke();
ctx.fill();
...
}
...
adding updated code to rotate based on velocity
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = 500;
let friction = 0.8;
let gravity = 1.5;
class Player {
constructor() {
this.x = 128;
this.y = 260;
this.w = 32;
this.h = 32;
this.vx = 0;
this.vy = 0;
this.speed = 3;
this.color = "green";
this.a = 0;
this.r = this.a * (Math.PI/180);
}
draw() {
ctx.save();
ctx.fillStyle = this.color;
ctx.translate(this.x+this.w/2, this.y+this.h/2)
ctx.rotate(-this.r);
ctx.fillRect(0, 0, this.w, this.h);
ctx.restore();
}
update() {
if (controller.space) {
this.vy < 10 ? this.vy -= this.speed : this.vy = 10;
this.a < 10 ? this.a += 0.5 : this.a = 10;
} else {
this.a > 0 ? this.a -= 0.5 : this.a = 0;
}
this.r = this.a * (Math.PI/180);
this.vy += gravity;
this.y += this.vy;
this.vy *= friction;
this.draw()
}
canvasCollision() {
if (this.x <= 0) this.x = 0;
if (this.y <= 0) this.y = 0;
if (this.x + this.w >= canvas.width) this.x = canvas.width - this.w;
if (this.y + this.h >= canvas.height) {
this.y = canvas.height - this.h;
this.vy = 0;
}
}
}
let player = new Player();
function handlePlayer() {
player.draw();
player.update();
}
class Controller {
constructor() {
this.space = false;
let keyPress = (e) => {
if (e.code === "Space") this.space = e.type === "keydown";
};
window.addEventListener("keydown", keyPress);
window.addEventListener("keyup", keyPress);
}
}
let controller = new Controller();
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = 'bold 48px serif';
ctx.fillText("Spacebar", 100, 50);
player.update();
player.canvasCollision();
requestAnimationFrame(animate);
}
animate();
<canvas id="canvas"></canvas>