Issues with ctx.rotate canvas

Coding Help
, , ,
1

Hi everyone! Just earlier I was experimenting with ctx.rotate property. I came across an issue, in which when I try to rotate the canvas temporarily (within ctx.save and restore) it rotates it based off of a point on the grid. I’m not entirely sure how to explain it…

this is my related code:

this.context.save();
      for (let i = 0; i < fireballs.length; i++) {
        var fireball = fireballs[i];
        
        let forwardPOS = {
          x: fireball.x + 30 * Math.cos(fireball.dir),
          y: fireball.y + 30 * Math.sin(firball.dir)
        };
        this.context.rotate(player.dir);
        
        
        this.context.beginPath();
        this.context.shadowBlur = 10;
        this.context.shadowColor = "rgba(0, 0, 0, 0.33)";
        this.context.lineWidth = 5.5;
        this.context.strokeStyle = "#4e5254";
        this.context.fillStyle = fireball.color || "red";
        this.context.arc(
          fireball.x,
          fireball.x,
          30,
          0,
          Math.PI * 2
        );
        this.context.stroke();
        this.context.fill();
        
        // Eyes
        this.context.beginPath();
        this.context.fillStyle = "#fff";
        this.context.strokeStyle = "#4e5254";
        this.context.lineWidth = 3;
        
        this.context.ellipse(forwardPOS.x - this.xOffset, forwardPOS.y - this.yOffset, 10 /* width */, 7.5 /* height */, Math.PI, 0 - Math.PI, Math.PI);
        this.context.fill();
      }
      this.context.restore();

Any guidance would again be appreciated!

2

so this is rotating it for each fireball? that’s gotta be more than you need

3

Yes. It’s not exactly a fireball, had to rename it because the code was terrible before (literally unreadable). It should rotate each fireball, but it seems to rotate it based on another point on the canvas

4

oh is this about the rotation origin? if the context isn’t otherwise transformed, the origin is in the top left. if you want to rotate around another point, you can translate that point to the origin, rotate, then translate the origin back to the original point. dunno if there’s a simpler way to do this

1 Like
5

Thanks! Yeah that seems to have fixed it.

On a side note though: I’ve noticed something weird happening to the directions.
If you don’t mind, could you also take a look that that too? (https://quickest-flashy-softball.glitch.me/design).

I really appreciate your help! It’s a blessing to find someone like you!

1 Like
6

can’t tell how to use this app, don’t know what you mean by “the directions”

7

You can see here the clip below. The pupils of the eye dont rotate correctly along with the eye (intended behaviour was for the pupils to always be “contained” within the eye, but update faster then the circle’s direction).

8

yeah huh, it’s like the angle is doubled

1 Like
9

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.