DOMDisplay와는 달리 이 디스플레이 스타일은 모든 업데이트에서 배경을 다시 그려야 합니다. 캔버스의 셰이프는 픽셀에 불과하기 때문에 그림을 그린 후에는 셰이프를 이동하거나 제거할 수 있는 좋은 방법이 없습니다. 캔버스 디스플레이를 업데이트하는 유일한 방법은 캔버스를 지우고 장면을 다시 그리는 것입니다. 우리는 또한 다른 위치에 있는 배경을 필요로 하는 스크롤 할 수 있습니다. SVG와 HTML 모두 사진을 나타내는 데이터 구조(DOM)를 구축합니다. 이렇게 하면 요소를 그린 후 수정할 수 있습니다. 사용자가 수행하는 작업의 내용이나 애니메이션의 일부로 큰 그림의 작은 부분을 반복적으로 변경해야 하는 경우 캔버스에서 작업을 수행하는 데 비용이 많이 들 수 있습니다. DOM을 사용하면 그림의 모든 요소에 마우스 이벤트 처리기를 등록할 수 있습니다(SVG로 그려진 모양에서도 마찬가지). 캔버스로는 그렇게 할 수 없습니다. HTML5 캔버스 페인트 응용 프로그램을 구현하는 데 대한 세부 정보를 시작하기 전에 웹 브라우저에서 실행되는 실제 페인트 응용 프로그램을 살펴보겠습니다. HTML5는 차세대 클라이언트 및 웹 기반 응용 프로그램을 만들기 위한 흥미롭고 강력한 기술 집합을 제공합니다. HTML5 캔버스 요소를 사용하면 소프트웨어 개발자는 차트, 애니메이션, 게임 등을 비롯한 다양한 그래픽 응용 프로그램을 만들 수 있습니다.
HTML5는 여전히 사양에 따라 있지만, 많은 최신 웹 브라우저는 이미 전체 지원을 포함, 개발자가 생산성과 사용자 상호 작용을 향상시키기 위해 완벽하게 작동하는 HTML5 응용 프로그램을 구현 할 수 있도록. 다음 예제의 분기 함수는 변환을 변경한 다음 지정된 변환으로 계속 그리는 함수(이 경우 자체)를 호출하는 함수로 수행할 수 있는 작업을 보여 줍니다. 다른 HTML5 응용 프로그램과 마찬가지로 캔버스 요소를 포함하는 간단한 웹 페이지로 시작할 수 있습니다. 캔버스 요소는 실제로 웹 페이지 본문 내에 있는 HTML5 태그입니다. 자바스크립트를 사용하여 캔버스 요소와 도구 모음 단추를 참조하므로 jQuery 라이브러리에 대한 링크도 포함됩니다. 간단한 페이지의 HTML 소스 코드가 다음과 같이 나타날 수 있습니다. HTML5는 여전히 새로운 일부 브라우저 (pssst … 즉, Internet Explorer) 캔버스 태그를 지원하지 않으므로 이 태그 줄을 대신 사용해 보겠습니다. 이렇게 하면 마우스를 클릭하지 않고도 마우스를 움직이기만 하면 쉽게 그림을 그릴 수 있습니다. 그러나, 그것은 (대부분의 전통적인 페인트 프로그램에서와 같이) 마우스 버튼을 누르고있는 동안 페인트 프로그램을 향상시키기 쉽습니다 paint.js에 다음과 같은 변경을함으로써 : 안녕하세요 Rishabh, 좋은 일과 튜토리얼은 나에게 많은 도움이되었습니다.