Повёрнутый текст в canvase

[MC-XOBAHCK]

У меня проблемы с текстом в canvas. Не могу вывести два текста подряд с разными rotate и координатами.
Вот код, Текст3 и Текст4 крутятся вместе:

ctx.font = '21px Roboto';
ctx.fillStyle = "#000";

ctx.fillText('Текст1', 140, 33);

ctx.fillText('Текст2', 40, 135);

ctx.translate(20, 10);
ctx.rotate((Math.PI / 180) * (40));    // этот rotate поворачивает и следующий текст
ctx.fillText('Текст3', 20, 10);

ctx.translate(20, 100);
ctx.rotate((Math.PI / 180) * (-60));
ctx.fillText('Текст4', 0, 0);

Наверно я неправильно вывожу. Возможно для текста есть какой то разделитель типа beginPath()
Подскажите, как правильно сделать?

[j0hnik]

MC-XOBAHCK,
rotate поворачивает не текст, а контекст

<canvas></canvas>
	<script>
		var canvas = document.querySelector('canvas');
		ctx = canvas.getContext('2d');

ctx.font = '21px Roboto';
ctx.fillStyle = "#000";
ctx.rotate(1); 
ctx.fillText('Текст1', 20, 10);
ctx.fillText('Текст2', 20, 20);
ctx.rotate(-1);
ctx.fillText('Текст3', 20, 30);
ctx.fillText('Текст4', 20, 40);

</script>

предполагаю что вам надо повернуть холст, написать и вернуть в исходное положение чтобы не трогать остальное

[Alexandroppolus]

этот rotate поворачивает и следующий текст

Если не нравится, то ctx.save()/ctx.restore()
https://developer.mozilla.org/en-US/...ransformations

[MC-XOBAHCK]

rotate поворачивает не текст, а контекст

Спасибо, оч хороший пример - коротко и ясно.

Если первый повернули на 40, а второй надо на -60, значит второй будет -100 (-60-40).

Да, теперь уже понял.

ctx.save()/ctx.restore()

Бывают же в жизни огорчения...
Я вчера много раз всю документацию просмотрел, правда ru-версию. А там значительно урезано: https://developer.mozilla.org/ru/doc...Context2D/save
Спасибо, закладку исправил на en-US, теперь буду знать как оно бывает.