html 캔버스의 뒤집기 및 중심점

Question

내 캔버스에서 원점을 반전시키고 가운데에 배치했지만 y 축이 내 x 축처럼 축척되지 않는 것 같습니다.

나는 그렇게

context.setTransform(1, 0, 0, -1, (canvas.width/2), (canvas.height/2)); 

내가 뭔가 잘못하고 있는가처럼 변환하고 있어요?

다음은 fiddle

Answer 1

대신 다시 설정 캔버스의 너비와 CSS를 사용하여 높이, 캔버스 요소를 직접 다시 설정합니다.

기본 캔버스 크기는 300x150이므로 CSS 스타일을 400x400으로 설정하면 실제로 캔버스 높이가 늘어납니다.

그래서 자바 스크립트에서이 방법을 수행

canvas.width=400; 
canvas.height=400;