HTML5 <canvas> 요소에는 중요한 특징이 있습니다. 바로 캔버스에 무언가를 그리면, 그려진 내용에 대한 어떠한 기록(메모리)도 남지 않는다는 점입니다.
캔버스는 단순히 픽셀을 화면에 렌더링할 뿐, 도형의 좌표나 색상, 크기 같은 정보를 내부적으로 저장하지 않습니다. 따라서 개발자가 그리는 과정에서 필요한 모든 정보를 변수 등으로 직접 관리해야 합니다. 이러한 이유로 HTML5 캔버스에서 JavaScript로 값을 가져오는 것은 기본적으로 불가능합니다.
캔버스 생성 예시
캔버스는 아래와 같이 간단하게 정의할 수 있습니다.
<canvas id = "myCanvas" height = "300" width = "500" style = "border:2px solid #808080;"></canvas>
버튼 클릭으로 값을 가져오려 하면?
버튼을 만들고 클릭 시 값을 조회하는 함수를 연결해 보아도 원하는 결과를 얻을 수 없습니다.
<div> <input type = "button" value = "Submit" onclick = "submit()"> </div>
캔버스는 본질적으로 단순한 비트맵(bitmap)일 뿐입니다. 즉, 화면에 표시된 픽셀 데이터만 존재할 뿐, 그 안에 어떤 도형이 어디에 그려졌는지에 대한 구조화된 정보는 없습니다. 그래서 버튼을 클릭하더라도 캔버스에서 그려진 요소들의 값을 꺼내올 방법이 없습니다.
대안은 무엇일까?
캔버스에 그린 요소의 상태를 활용해야 한다면 다음과 같은 방법을 고려할 수 있습니다.
- JavaScript 객체로 상태 관리: 그릴 때마다 좌표, 크기, 색상 등의 정보를 배열이나 객체에 함께 저장합니다.
- SVG 사용: 개별 요소를 DOM 노드로 다루고 싶다면 캔버스 대신 SVG를 사용하는 것이 적합합니다.
- 라이브러리 활용: Fabric.js, Konva.js처럼 캔버스 위의 객체를 자동으로 추적하고 조작할 수 있게 해주는 라이브러리도 유용합니다.
결론적으로, HTML5 캔버스는 그리기 전용 비트맵이므로 그려진 내용의 값을 되돌려 받으려면 개발자가 별도로 상태를 저장·관리해야 한다는 점을 기억하세요.