JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/journal/bootstrap.min.css">

  <center>
    <h1 id="h1">Dodge the enemy by pressing the left and right arrow keys!</h1>
        <button
        id="play"
        class="btn btn-primary">Play game!</button>
        </br>
        </br>
        <button
        id="again"
        class="btn btn-primary">Play Again!</button>
        <div id="play-area">
        </div>
  </center>

JavaScript

$(function () {
function createCanvas(width, height, id) {

    var canvas = document.createElement('canvas');
    var body = document.getElementsByTagName("body")[0];

    canvas.id = id;
    canvas.width = width;
    canvas.height = height;
    body.appendChild(canvas);
		$('canvas').css('background-color', 'rgba(158, 167, 184, 0.2)');   
    cursorLayer = document.getElementById("CursorLayer");
    console.log(cursorLayer);
 
}


$("#play").click(function () {
    console.log("hello");
    createCanvas(900, 900, "game-canvas");
    alert("hi!");
  });
});