선생님 recalculatedInnerWidth에 대한 질문입니다... - 인프런

const recalculatedInnerWidth = document.body.offsetWidth / canvasScaleRatio;

values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) / 2;
values.rect2X[0] = values.rect1X[0] + recalculatedInnerWidth - whiteRectWidth;

제가 canvas에 대해 잘몰라서 이해를 잘 못하는 것 같습니다.

선생님께서 canvas의 너비를 다시구하는 부분이 잘 이해가 되지않아서 생각해 보던중

선생님께서 말씀해주신 canvas에서 보이는 부분의 너비를 빼고 2로 나누어서 잘려진 부분의 너비를 구하고 그 너비를 시작으로 박스를 만든다고 이해했습니다.

1. objs.canvas.width * canvasScaleRatio를 하게되면 현재 브라우저에 설정된 canvas의 너비를 구할 수 있다고 생각합니다.

이 값에서 values.rect1X[0] = ((objs.canvas.width * canvasScaleRatio) - document.body.offsetWidth) /2 를 설정하고

values.rect2X[0] = values.rect1X[0] + document.body.offset - whiteRectWidth 을 해도 될거같아서 해봤는데..ㅠ 결과는 왼쪽은 맞는데 오른쪽이 맞지 않았습니다. (왼쪽도 선생님께서 구하신 것보다는 딱맞는다는 느낌은 들지 않았습니다.)

제가 느끼기에는 fillRect에 설정하는 값이 브라우저에서 사용하는 값과 이격이 있는거 같은데... 맞나요??

예를 들어서 fillRect에 x값을 100을 설정하는 것과 브라우저의 100px과는 다른것 같아서 여쭤봅니다..ㅠㅠ

2.그리고 이거는 다른 질문인데 선생님께서 마우스를 이용하여 픽셀 높이를 줄자처럼 재시던데.. 그거는 혹시 프로그램인가요?

인프런 커뮤니티 질문&답변

선생님 recalculatedInnerWidth에 대한 질문입니다!