[2024 동계모각코] 5회차 회고

저번주에 완성한 canvas부분이 분명 내 화면에서는 잘 보였는데, yany의 화면에서는 이상하게 나타나는 문제가 발생했다.

 

canvas의 크기가 뭔가 내것보다 작게 나왔다.

 

곰곰히 생각해보니 레티나 디스플레이 dps(device pixel ratio)문제일거라 생각해서 yany의 dps를 보니 약 1.799인가 그랬다.

 

그리고 내 코드를 보니, 내 dps에 맞춰서 코드를 작성해놓은 것을 알게됐다.

 

나는 dps가 2인데 yany는 1.799이니, dps로 나누거나 곱하는 부분에서 비율이 엉망이 되버렸던 것이다.

 

useEffect(() => {
        const canvas = canvasBottomRef.current;


        if (canvas) {
            const context = canvas.getContext("2d");

            if (context){
                // 캔버스 크기를 레티나 디스플레이에 맞게 설정
                const scaleFactor = window.devicePixelRatio;
            
                if (!isScaled){
                    canvas.width = canvas.width * scaleFactor;
                    canvas.height = canvas.height * scaleFactor;
                    context.scale(scaleFactor, scaleFactor);
                    setScaled(true);
                }
                context.clearRect(0, 0, canvas.width, canvas.height);

                // 그림자 설정
                context.shadowColor = "rgba(0, 0, 0, 0.6)";
                context.shadowBlur = 20;
                context.shadowOffsetX = 0;
                context.shadowOffsetY = -5;

                // 곡선 그리기
                context.beginPath();
                context.moveTo(0, 150);
                context.quadraticCurveTo(canvas.width / (scaleFactor*2), 50, canvas.width / scaleFactor, 150);

                // 라인 그리기
                context.lineTo(canvas.width / scaleFactor, canvas.height / scaleFactor);
                context.lineTo(0, canvas.height / scaleFactor);
                context.lineTo(0, 150);

                context.closePath(); // 시작점과 끝점을 연결하여 닫힌 도형으로 만듭니다.

                context.fillStyle = "#b34b47";
                context.fill(); // 채우기
            }
        }
    }, [])

 

바뀐 코드는 위와 같다.

 

나의 경우 커브를 그리는 부분과, 커브 밑쪽 부분을 채우는 곳이 전부 좌표를 찍도록 돼있었다.

 

바뀐 canvas 너비와 높이에 대해 dps로 나눠야했는데, 이 부분을 그냥 2라고 생각하고 넣어놓은 것이 문제였다.