1

is it possible that in this code

<canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>

<script>
setInterval(function() {
    testf();
},1000/25);

    var ctx = document.getElementById("ctx").getContext("2d");
    var img = new Image();
    img.src = 'C:/.../img/player.png';
    var img2 = new Image();
    img2.src = 'C:/.../img/player2.png';
 
// ctx.rotate(45 * Math.PI / 180);

function testf() {
        ctx.clearRect(0,0,500,500);
        ctx.rotate(5 * Math.PI / 180);
        ctx.drawImage(img,100,100);
        ctx.drawImage(img2,200,200);
    };
</script>

it was possible to rotate only player2, and not all elements of the canvas. Options, create another canvas, I am not satisfied. I would like to implement this through JS, for example img.rotate 5; or rotate(this.angle); but I don’t know how to write it correctly.

Renvo
  • 13
  • 3
  • you need to save the context with ctx.save(), rotate, draw the element you want rotated, and then cts.restore() – aptriangle Sep 16 '21 at 20:58

0 Answers0