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); 해주면 끝!
스택오버플로우 답변을 참고했다.
'개발 > 아카이브' 카테고리의 다른 글
| 웹페이지 최적화 (0) | 2018.07.16 |
|---|---|
| webstorm에서 javascript/CSS minify 적용 (0) | 2018.07.16 |
| canvas rotate 후 axis 조정 (0) | 2018.02.19 |
| 우분투에서 HeidiSQL 사용하기 (0) | 2018.01.17 |
| api 문서화, 좋은 예시 (0) | 2017.10.31 |
| ubuntu16에서 Pycharm, Webstorm 설치하기 (0) | 2017.08.23 |