Paper.js는 캔버스 태그에 속성을 추가하여 몇 가지 다른 방법으로 구성할 수 있습니다: 다음 예제에서는 여러 그리기 도구를 만들고 간단한 UI를 사용하여 여러 도구를 전환하는 것이 얼마나 쉬운지 보여 줍니다.이 경우 하나의 도구 또는 t를 활성화하는 HTML 링크 두 개만 다른: PaperScript는 글로벌 함수로 선언될 때 몇 가지 특수 이벤트 처리기를 인식하는 반면 JavaScript에서는 적절한 개체에 수동으로 설치해야 합니다. 두 개의 이러한 처리기가 onFrame 및 onResize이며 둘 다 View 클래스에 속합니다. 위의 예에서와 같이 paperScope.setup(캔버스) 기능을 사용하면 뷰가 자동으로 생성됩니다. 따라서 기존 뷰 오브젝트에 이러한 처리기를 설치하기만 하면 됩니다. PaperScript는 수학 연산자의 추가 지원과 함께, 당신이 사용하는 일반 오래된 자바 스크립트입니다 (+ – * * / %) 점 및 크기 객체에 대한 값입니다. PaperScript 코드는 전역 범위에 오염되지 않고 문서 나 창과 같은 모든 전역 브라우저 개체 및 기능에 여전히 액세스 할 수 있도록 자체 범위에서 자동으로 실행됩니다. 코드는 onResize 함수 처리기를 만들어 창의 크기 조정에 응답할 수 있습니다. 예를 들어 뷰의 중앙에 원 모양의 경로를 만들고 크기를 조정한 후 가운데에 배치하려고 한다고 가정해 보겠습니다: keepalive=”true”: 배터리 전원 및 CPU 사용량을 절약하기 위해 Paper.js는 일반적으로 창에 초점을 맞추지 않을 때 모든 애니메이션 이벤트를 중지합니다. 창이 배경에 있더라도 애니메이션을 계속 재생하려면 캔버스 태그에 keepalive=”true”를 설정합니다. 그리고 다시 유효성 검사를 위해 데이터 페이퍼 키살 =”true”도 작동합니다.

뉴욕 타임즈는이 재미있는 추상 미술 도구에 대한 Paper.js로 전환. Google 크리에이티브 랩: “사용자 지정 트랙과 유동적인 자동차 움직임을 렌더링하려면 견고한 JavaScript 벡터 라이브러리가 필요했습니다. Paper.js는 래핑하지 않고도 경로 수학을 처리할 수 있습니다.” 페이지에 두 개 이상의 PaperScript를 포함하면 각 스크립트는 자체 범위에서 실행되며 다른 스크립트에 선언된 개체 및 함수가 표시되지 않습니다. PaperScript가 다른 PaperScript 또는 자바스크립트 코드와 통신하려면 PaperScript 상호 운용성에 대한 자습서를 참조하세요. 범위, 프로젝트, 뷰 및 도구 간의 관계를 설명하기 위해 각 범위는 하나 또는 여러 개의 뷰(각 프로젝트가 Paper.js 캔버스를 나타내는)를 통해 표시되는 하나 또는 여러 개의 프로젝트를 보유할 수 있습니다. 뷰는 특정 프로젝트와 연결되지 않지만 실제로 는 가시 영역 내에 항목이 있는 모든 표시되는 프로젝트를 렌더링합니다. 도구는 동일한 범위에 속하는 한 모든 뷰 내의 모든 프로젝트에서 작업할 수 있습니다.