Как реализовать отражение объектов на Canvas?

@celestino 

Отражение объектов на Canvas можно реализовать с помощью метода scale() для контекста рисования. Этот метод принимает два параметра: первый задает масштаб по оси X, а второй – по оси Y. Если значение параметра масштаба отрицательное, то объекты будут отражаться.

Пример реализации отражения круга на Canvas:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(50, 50, 30, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();

// отражение по оси X
ctx.scale(-1, 1);
ctx.beginPath();
ctx.arc(-50, 50, 30, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();

В этом примере сначала рисуется круг красного цвета. Затем контекст рисования масштабируется по оси X с помощью метода scale(-1, 1). После этого рисуется второй круг синего цвета с заданными координатами, отраженный по оси X относительно первого круга.