Листинг 22.14

ctxCanvas.save();

ctxCanvas.strokeRect(0, 0, 50, 50);

ctxCanvas.scale(3, 1);

ctxCanvas.strokeRect(0, 0, 50, 50);

ctxCanvas.restore();

ctxCanvas.save();

ctxCanvas.scale(1, 3);

ctxCanvas.strokeRect(0, 0, 50, 50);

ctxCanvas.restore();

ctxCanvas.save();

ctxCanvas.scale(3, 3);

ctxCanvas.strokeRect(0, 0, 50, 50);

ctxCanvas.restore();

Web-сценарий из листинга 22.14 делает следующее:

1. Сохраняет текущее состояние канвы.

2. Рисует квадрат размерами 50 50 пикселов, верхний левый угол которого находится в начале координат.

3. Увеличивает масштаб горизонтальной координатной оси в 3 раза.

4. Рисует второй квадрат размерами 50 50 пикселов, верхний левый угол которого находится в начале координат.

5. Восстанавливает сохраненное ранее состояние канвы и сохраняет его снова.

6. Увеличивает масштаб вертикальной координатной оси в 3 раза.

7. Рисует третий квадрат размерами 50 50 пикселов, верхний левый угол которого находится в начале координат.

8. Восстанавливает сохраненное ранее состояние канвы и сохраняет его снова.

9. Увеличивает масштаб обоих координатных осей в 3 раза.

10. Рисует четвертый квадрат размерами 50 50 пикселов, верхний левый угол которого находится в начале координат.

11. Восстанавливает сохраненное ранее состояние канвы.

В результате мы увидим четыре прямоугольника с реальными размерами 50 50, 150 50, 50 150 и 150 150 пикселов.