Нужно сделать игру и меню которое при вводе имени и нажатии кнопки исчезает и начинается игра, меню сделал, но второй скрипт с игрой не выплняется ничего не происходит помогите плиз
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="SplashScreen" class="SplashScreen">
<h1 class="zag">Тимон и Пумба</h1>
<input type="text" id="forUser" class = "playername"placeholder = 'Имя игрока'>
<input class="knopka" id="StartButton" type="button" value="Начать игру"/>
</div>
<canvas id="GameCanvas" style="display: none;">Game Stч</canvas>
<script>
$("#StartButton").click(function () {
$("#SplashScreen").hide();
$("#GameCanvas").show();
});
</script>
<script >
var canvas = getElementByID('GameCanvas');
var ctx = canvas.getContext('2d');
var img = new Image()
img.src = 'fon.png'
img.onload = function() {
var pattern = context.createPattern(img, "repeat");
context.fillStyle = pattern;
context.fillRect(10, 10, 150, 150);
context.strokeRect(10, 10, 150, 150);
};</script>
</body>
</html>
canvas {
width: 70%;
position: absolute;
margin-left: 15%;
height: 75vh;
border: solid 1px black;
}
.SplashScreen{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #FF0000;
width: 70%;
height: 75vh;
position: absolute;
top: 0;
left: 15%;
}
.zag{
margin-bottom: 13%;
position: relative;
color: #FFC0CB;
}
.playername{
text-align: center;
position: relative;
margin-bottom: 11%;
width: 20%;
}
.knopka{
height: 7%;
width: 15%;
position: relative;
background: rgb(212,75,56);
}
.knopka:hover {
background: #FF00FF;
}
пусто нет ошибок 
поменял, но все равно не работает src="