Hello.

I am writing a html5 platformer, and so, the task was to rotate the image of the hero, all this on the canvas. But when rendering, the background and all the other characters also rotate, porridge in one word.

I rummaged through the entire Internet in search of a solution to the problem, tried to create a new context for each hero this.ctx = canvas.getContext("2d"); but did not help, I ask for your help, thanks in advance!)

    1 answer 1

     // Сохраняем настройки канваса до всяких манипуляций с ним ctx.save(); // Сдвигаем все адресованные пиксели на указанные значения ctx.translate(canvas.width/2,canvas.height/2); // Поворачиваем на `degrees` наш градус ctx.rotate(degrees*Math.PI/180); // Рисуем повернутую картинку ctx.drawImage(image,-image.width/2,-image.width/2); // Восстанавливаем настройки на момент когда делали `ctx.save` // то бишь до `ctx.translate` и `ctx.rotate`. Рисунок при этом сохраняется. ctx.restore();
    • Thank you very much, it helped!) - Accami