브라이언 커니핸의 예제로 이 장의 마지막을 장식하도록 합시다.
어려운 부분은 이미 다 했습니다.
이제 할 일은 텍스트를 추가하는 것뿐입니다.
onMouseDown 핸들러 앞에 다음 코드를 추가하십시오.

$(document).ready(function () {
    'use strict';
    paper.install(window);
    paper.setup(document.getElementById('mainCanvas'));

    var c = Shape.Circle(200, 200, 80);
    c.fillColor = 'black';
    var text = new PointText(200, 200);
    text.justification = 'center';
    text.fillColor = 'white';
    text.fontSize = 20;
    text.content = 'hello world';

    var tool = new Tool();

    tool.onMouseDown = function (event) {
        var c = Shape.Circle(event.point.x, event.point.y, 20);
        c.fillColor = 'green';
    }

    paper.view.draw();
})

여기서 추가한 내용은 매우 단순합니다.
텍스트의 배경으로 쓸 다른 원을 하나 더 만들고, 텍스트 객체 PointText를 만들었습니다.
텍스트가 캔버스의 중앙에 위치하도록 하고, 정렬 방식과 색깔, 크기 같은 몇 가지 속성을 지정했습니다.
마지막으로 실제 텍스트 컨텐츠인 “hello world”를 지정했습니다.

자바스크립트로 텍스트를 출력한 것이 이번이 처음은 아닙니다.
이 장 초반의 console.log 예제에서도 이미 텍스트를 출력했습니다.
물론 그 예제에서도 “hello world” 텍스트를 출력하는 것이 1972년에 했을 방법과 더 비슷할 겁니다.
하지만 중요한 것은 텍스트의 내용이나 어떻게 출력되는지가 아닙니다.
중요한 것은 자동으로 실행되는 것을 만들었다는 점, 그리고 눈으로 볼 수 있는 효과가 있다는 점입니다.

브라우저를 새로고침하면 거룩한 “hello, world”의 전통에 동참하게 됩니다.

“hello world”를 출력해본 것이 처음이라면, 프로그래밍의 세계에 오신 것을 환영합니다.
그렇지 않다면, 이 예제를 통해 자바스크립트에 대해 어느 정도 이해할 수 있었기를 바랍니다.