paper.jsをロードしているはずなのに、Uncaught ReferenceError: Tool is not definedが出る

前提・実現したいこと

以下該当のソースコードをJavascript(es6)で書いているのですが、
以下のエラーメッセージが出てしまう理由がわかりません。アドバイスとご指摘をお願いします。

発生している問題・エラーメッセージ

Uncaught ReferenceError: Tool is not defined

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>ex02-08-1</title>
6    <style>
7      #mainCanvas { /* mainCanvasのスタイルを指定 */
8         width: 400px;  /* 幅 400ピクセル */
9         height: 400px; /* 高さ 400ピクセル */
10         border: solid 1px black;  /* 実線  1ピクセルの幅　黒 */
11}
12    </style>
13  </head>
14  <body>
15  <h1>最初のアプリケーション</h1>
16    <p>『初めてのJavaScript 第3版』へようこそ</p>
17
18    <canvas id="mainCanvas"></canvas>
19
20    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
21    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.min.js"></script>
22    <script>
23      let tool = new Tool()
24
25      tool.onMouseDown = function(event) {
26        let c = Shape.Circle(event.point.x, event.point.y, 20)
27        c.fillColor = 'green'
28      }
29    </script>
30  </body>
31</html>
32

試したこと

index.html, style.css, main.jsに分かれている教本通りのソースコードだと正常に動くことを確認しました。
スタイルシート、javascriptをhtml内に記述するとpaper.js自体がインポートされていないようなのですが、
どういった理由で上記エラーが出力されるのかわかりません。

###教本のソースコード
結論から申し上げますと、質問者である私の記述ミスでした。教本の書き方がコードの一部抜粋だったので、その抜粋だけを上記コードに書いてしまったので動かなかったということです。

しかし、疑問が残ります。上記コードではCDNからpaper.jsをロードして、tool = new Tool()を行っています。それでTool is not definedエラーが出るのはどうしてでしょうか？

html
1index.html
2
3<!DOCTYPE html>
4<html>
5  <head>
6    <meta charset="utf-8">
7    <title>ex02-08-1</title>
8    <link rel="stylesheet" href="main.css">
9  </head>
10  <body>
11  <h1>最初のアプリケーション</h1>
12    <p>『初めてのJavaScript 第3版』へようこそ</p>
13
14    <canvas id="mainCanvas"></canvas>
15
16    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
17    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.min.js"></script>
18    <script src="main.js"></script>
19  </body>
20</html>

css
1main.css
2
3#mainCanvas { /* mainCanvasのスタイルを指定 */
4   width: 400px;  /* 幅 400ピクセル */
5   height: 400px; /* 高さ 400ピクセル */
6   border: solid 1px black;  /* 実線  1ピクセルの幅　黒 */
7}

jsvascript
1main.js
2
3$(document).ready(function() {
4  'use strict';
5  paper.install(window);
6  paper.setup(document.getElementById('mainCanvas'));
7
8  // #@@range_begin(list1) 本に表示されている部分の始まりを示します
9  let tool = new Tool();
10
11  tool.onMouseDown = function(event) {
12    let c = Shape.Circle(event.point.x, event.point.y, 20);
13    c.fillColor = 'green';
14  };
15  // #@@range_end(list1) 本に表示されている部分の終わりを示します
16});

###自分のミスを訂正して、動作したコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>ex02-08-1</title>
6    <style>
7      #mainCanvas { /* mainCanvasのスタイルを指定 */
8         width: 400px;  /* 幅 400ピクセル */
9         height: 400px; /* 高さ 400ピクセル */
10         border: solid 1px black;  /* 実線  1ピクセルの幅　黒 */
11}
12    </style>
13  </head>
14  <body>
15  <h1>最初のアプリケーション</h1>
16    <p>『初めてのJavaScript 第3版』へようこそ</p>
17
18    <canvas id="mainCanvas"></canvas>
19
20    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
21    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.2/paper-full.min.js"></script>
22    <script>
23$(document).ready(function() {
24  'use strict'
25  paper.install(window)
26  paper.setup(document.getElementById('mainCanvas'))
27
28  // #@@range_begin(list1) 本に表示されている部分の始まりを示します
29  let tool = new Tool()
30
31  tool.onMouseDown = function(event) {
32    let c = Shape.Circle(event.point.x, event.point.y, 20);
33    c.fillColor = 'green'
34  }
35  // #@@range_end(list1) 本に表示されている部分の終わりを示します
36})
37    </script>
38  </body>
39</html>

m.ts10806

2020/02/27 22:57

＞index.html, style.css, main.jsに分かれている教本通りのソースコードこちらも併せてご提示ください。

kalon

2020/02/27 23:37

記載しました。自分のミスにも気づきました。 @m.ts10806様、ベストアンサーに選びたいので、回答のほうで何かコメントを残していただけると幸いです。よろしくお願いいたします。

kalon

2020/02/27 23:37

しかし、疑問が残ります。上記コードではCDNからpaper.jsをロードして、tool = new Tool()を行っています。それでTool is not definedエラーが出るのはどうしてでしょうか？

m.ts10806

2020/02/28 00:38

ん。私は何もアドバイスしてませんよ。あくまで動いたコードがどんなものか知りたかっただけです。自身で回答を書いて自己解決としてください。 >Tool is not definedエラーが出るのは詳しいわけではないですが、そもそも遅延ロードかもしれませんね。(間違ってたらごめんなさい。うまく説明できる人お願い)