캔버스에는 왜 크기가 두 가지 있나요?
HTML의 캔버스(canvas, 프로그램으로 그림을 그리는 영역)는 작은 색점들이 모인 비트맵(bitmap, 그림을 점의 격자로 저장한 것)을 담습니다. canvas의 width와 height 속성은 내부 비트맵의 가로와 세로 크기를 정합니다. CSS의 width와 height는 그 그림을 화면에 표시하는 크기를 정합니다.
이 활동은 내부를 150×75, 화면 표시를 300×150 CSS 픽셀로 정해 시작합니다. 내부의 각 방향을 두 배로 늘여 보여 주는 설정입니다. 여기서 150×75는 실습을 위해 고른 값입니다. HTML에서 width와 height를 생략했을 때의 기본값은 300×150입니다.
화면 크기를 늘리면 그림에는 어떤 일이 생기나요?
내부 150×75인 그림을 CSS 300×150으로 표시하면 가로와 세로가 모두 두 배로 확대됩니다. 내부 비트맵의 점 개수는 그대로이며, 브라우저가 화면의 넓어진 공간에 맞추어 그림을 펼쳐 보여 줍니다. 이 과정에서 경계가 흐리거나 계단처럼 두드러져 보일 수 있습니다.
CSS 세로만 100픽셀로 바꾸면 가로는 2배, 세로는 약 1.33배가 됩니다. 두 방향의 확대율이 달라져 내부에 그린 원은 가로로 넓은 타원처럼 보입니다. 가로·세로를 함께 두 배로 바꾼 경우와 세로만 바꾼 경우를 비교하면 크기의 변화와 비율의 변화를 구별할 수 있습니다.
내부 크기를 바꾸면 그림은 그대로 남나요?
2차원 캔버스의 width나 height를 다시 설정하면 기존 그림이 지워지고 그리기 상태도 초기화됩니다. 선의 색과 굵기, 좌표 변환 등 필요한 설정을 다시 적용한 뒤 그림을 그려야 합니다. 같은 숫자를 다시 대입해도 초기화가 일어나므로 값을 넣는 시점에 주의해야 합니다.
이 활동은 내부 크기를 바꿀 때마다 같은 구성의 도형을 새 크기에 맞추어 다시 그립니다. CSS 표시를 300×150으로 유지하고 내부도 300×150으로 바꿔 보세요. 처음에 있던 작은 비트맵을 늘여 본 경우와 새로 그린 경우의 경계를 비교할 수 있습니다.
휴대전화에서도 같은 선명도로 보이나요?
CSS의 1픽셀과 화면 장치의 물리적인 1픽셀은 크기가 다를 수 있습니다. devicePixelRatio는 두 픽셀 크기의 비를 나타내는 값입니다. 예를 들어 이 값이 2인 화면에서 300×150 CSS 픽셀 영역을 선명하게 그리려면 내부를 600×300으로 준비하고 그에 맞춰 다시 그리는 방법을 쓸 수 있습니다.
실제 경계의 모습은 화면의 픽셀 비율과 확대 배율, 브라우저가 그림을 처리하는 방식에 따라 달라집니다. 활동에는 내부 크기와 요청한 CSS 크기, 실제 표시 크기를 함께 나타냅니다. 좁은 화면에서는 그림 영역을 가로로 움직이며 살펴볼 수 있습니다. 수치와 도형의 비율을 함께 읽어 보세요.