canvas rotate 후 axis 조정

canvas를 rotate하거나 transform 하면 x축, y축도 돌아가 버린다.

뭐 그냥 보여주기만 할 거라면 축이 어디든 상관 없지만,

캔버스에 그림을 그리거나 할 때는 축을 다시 맞춰줄 필요가 있다.

이거 때문에 엄청 삽질함..

그냥 

let canvas = $('#canvas'+idx)[0];
let ctx = canvas.getContext("2d");
...
ctx.transform(0, 1, -1, 0, height, 0);
ctx.drawImage(bgImg, 0, 0, width, height);
ctx.setTransform(1, 0, 0, 1, 0, 0)

이렇게 transform> drawImage 과정을 거친 뒤, ctx.setTransform(1, 0, 0, 1, 0, 0); 해주면 끝!

스택오버플로우 답변을 참고했다.

https://stackoverflow.com/questions/44822938/html-canvas-reset-drawing-point-after-transform-and-rotate