캔버스와 이 책의 미래

HTML5 API는 계속해서 발전하고 있으며 대부분 발전은 새로운 기능으로 이어진다.
캔버스 명세서도 예외가 아니다.
사실, 이 책이 출판되고 얼마 지나지 않아 WHATWG 캔버스 명세서에서 다음과 같은 새로운 기능을 업데이트했다.

• 타원 패스를 생성하는 ellipse() 메서드
• getLineDash() 메서드 및 setLineDash() 메서드와 점선을 그릴 때 사용하는 lineDashOffset 속성
• 텍스트를 위해 정확한 경계 박스를 결정할 수 있게 TextMetrics 오브젝트 확장
• Path 오브젝트
• CanvasDrawingStyles 오브젝트
• 히트 영역을 위한 지원 확대

그 당시에는 위에서 언급한 기능을 지원하는 브라우저가 없었으므로 위 기능을 테스트할 수 없었다.

지금은 호와 원뿐만 아니라 캔버스 2d 콘텍스트의 새로운 ellipse() 메서드를 이용해 타원을 그릴 수 있다.
마찬가지로, 현재 콘텍스트에서는 점선을 그리는 방법도 지원하고 있다.

초기에 TextMetrics 오브젝트에서는 문자열의 너비만 사용했다.
그러나 2012년 3월 26일 업데이트된 명세서에 따르면 여러분은 캔버스에서 문자열이 차지한 직사각형의 너비와 높이를 결정할 수 있다.
따라서 TextMetrics의 인수를 사용하면, 캔버스 기반 텍스트 컨트롤을 보다 쉽고 효율적으로 구현할 수 있을 것이다.

업데이트된 명세서에 따르면 타원과 개선된 TextMetrics 오브젝트 이외에 Path 메서드와 CanvasDrawingStyles 메서드가 추가됐다.
명세서가 업데이트되기 전에는 패스를 저장하거나 스타일을 그릴 방법이 없었다.
하지만 지금은 추상화를 나타낼 수 있는 오브젝트를 사용할 수 있을 뿐 아니라 Path 오브젝트를 취할 수 있도록 캔버스 2d 콘텍스트 메서드를 다양하게 재정의할 수도 있다.
예를 들면, 현재 패스의 윤곽을 그리는 context.stroke() 메서드를 호출해 콘텍스트 패스의 윤곽을 그릴 수 있다.
하지만 지금은 현재 콘텍스트에 stroke(Path) 메서드가 있기 때문에 콘텍스트의 현재 패스 대신 메서드에 전달하는 패스의 윤곽을 그릴 수 있다. 그리고 addText() 등과 같이 Path 메서드를 사용해 패스를 변경할 때 텍스트를 패스에 추가하는 경우라면, 패스에 사용되는 CanvasDrawingStyle 오브젝트를 명시할 수 있다.

업데이트된 명세서에 따르면, 히트 영역에 대한 지원을 확대하고 있다.
히트 영역은 패스에 의해 정의되므로 ARIA(Accessible Rich Internet Application) role 속성과 라벨 등과 같이 접근 파라미터(accessibility parameter)와 옵션 마우스 커서를 히트 영역과 연관 지어 생각할 수 있다.
그리고 단일 캔버스는 다중 히트 영역을 가질 수 있으므로 히트 영역을 사용하면 충돌 감지를 더 쉽고 효율적으로 구현할 수 있을 뿐 아니라 접근성도 개선시킬 수 있다.

마지막으로, WHATWG와 W3C 명세서는 모두 접근성을 위해 두 가지 캔버스 콘텍스트 메서드를 제공하기 때문에 사용자가 캔버스에서 키보드를 사용할 수 있도록 애플리케이션에서는 현재 패스 주위에 포커스 링(focus ring)을 그릴 수 있다.
이 책에선 아직 다루지 않았다.