jQuery linking with html Problem

jQuery linking with html Problem

Hello, can someone help troubleshoot my code and tell me why the html does not work with the JavaScript?
(The JavaScript is game.js)
         

Html:

<DOCTYPE.html>
<html>
    <header>
    
    </header>
        <head>
            <!-- Jquery -->
            <script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
            <script type="text/javascript" src="game.js"></script>
        
            <!--- meta data -->
            <meta charset="utf-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1"/>
            <meta name="description" content="#"/>
            <meta name="author" content="Grant Gorzocoski"/> 
            <meta name="copyright" content="#"/>
            <meta name="keywords" content="#"/>
            <meta name="robots" content="noindex, nofollow"/>
        </head>
            <body> 
          
                <!-- Canvas -->
                <canvas id="canvas" width="800" height="800"></canvas>
   </body>
</html>