Laravelで<button>タグをクリックするとUncaught ReferenceErrorというエラーが出る。

Laravel home.blade.phpで添付画像のように、「文字を描く」ボタンを押すと、画像に文字が表示されるscriptを実装したいです。

「文字を描く」ボタンを押すと、
「Uncaught ReferenceError: drawText is not defined　at HTMLButtonElement.onclick」
というエラーが解決できません。。。

htmlサイトでは実装できたのですが、laravelだとなぜ上記エラーが出てしまうのでしょうか？

php
1{{--home.blade.php--}}
2
3@extends('layouts.app')
4@section('content')
5    <div class="container">
6        <div class="row justify-content-center">
7            <div class="col-md-8">
8                <div>
9                    <p><canvas id="preview"></canvas></p>
10                    <p>
11                    <input type="text" id="canvas_text" value="我輩は犬である">
12                    <button onclick="drawText('preview', 'canvas_text');">文字を描く</button>
13                    </p>
14                </div>
15
16            </div>
17        </div>
18    </div>
19@endsection

PHP
1{{--app.blade.php--}}
2<!doctype html>
3<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
4<head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7
8    <!-- CSRF Token -->
9    <meta name="csrf-token" content="{{ csrf_token() }}">
10
11    <title>{{ config('app.name', 'Laravel') }}</title>
12
13
14    <!-- Fonts -->
15    <link rel="dns-prefetch" href="//fonts.gstatic.com">
16    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
17
18    <!-- Styles -->
19    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
20    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
21</head>
22<body>
23    <div id="app">
24        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
25            <div class="container">
26                <a class="navbar-brand" href="{{ url('/') }}">
27                    {{ config('app.name', 'Laravel') }}
28                </a>
29                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
30                    <span class="navbar-toggler-icon"></span>
31                </button>
32
33                <div class="collapse navbar-collapse" id="navbarSupportedContent">
34                    <!-- Left Side Of Navbar -->
35                    <ul class="navbar-nav mr-auto">
36
37                    </ul>
38
39                    <!-- Right Side Of Navbar -->
40                    <ul class="navbar-nav ml-auto">
41                        <!-- Authentication Links -->
42                        @guest
43                            <li class="nav-item">
44                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
45                            </li>
46                            @if (Route::has('register'))
47                                <li class="nav-item">
48                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
49                                </li>
50                            @endif
51                        @else
52                            <li class="nav-item dropdown">
53                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
54                                    {{ Auth::user()->name }} <span class="caret"></span>
55                                </a>
56
57                                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
58                                    <a class="dropdown-item" href="{{ route('logout') }}"
59                                       onclick="event.preventDefault();
60                                                     document.getElementById('logout-form').submit();">
61                                        {{ __('Logout') }}
62                                    </a>
63
64                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
65                                        @csrf
66                                    </form>
67                                </div>
68                            </li>
69                        @endguest
70                    </ul>
71                </div>
72            </div>
73        </nav>
74
75        <main class="py-4">
76            @yield('content')
77        </main>
78    </div>
79        <!-- Scripts -->
80        <script src="{{ asset('js/app.js') }}" defer></script>
81</body>
82</html>
83

javascript
1loadImage('preview');
2function loadImage(id)
3{
4    //画像を読み込んでImageオブジェクトを作成する
5    var image = new Image();
6    image.src = '/images/canvas.png';
7    image.onload = (function () {
8        //画像ロードが完了してからキャンバスの準備をする
9        var canvas = document.getElementById(id);
10        var ctx = canvas.getContext('2d');
11        //キャンバスのサイズを画像サイズに合わせる
12        canvas.width = image.width;
13        canvas.height = image.height;
14        //キャンバスに画像を描画（開始位置0,0）
15        ctx.drawImage(image, 0, 0);
16    });
17}
18
19drawText('preview', 'canvas_text');
20//キャンバスに文字を描く
21function drawText(canvas_id, text_id)
22{
23    var canvas = document.getElementById(canvas_id);
24    var ctx = canvas.getContext('2d');
25    var text = document.getElementById(text_id);
26    //文字のスタイルを指定
27    ctx.font = '32px serif';
28    ctx.fillStyle = '#404040';
29    //文字の配置を指定（左上基準にしたければtop/leftだが、文字の中心座標を指定するのでcenter
30    ctx.textBaseline = 'center';
31    ctx.textAlign = 'center';
32    //座標を指定して文字を描く（座標は画像の中心に）
33    var x = (canvas.width / 2);
34    var y = (canvas.height / 2);
35    ctx.fillText(text.value, x, y);
36}