HTML canvas outside/inside div

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <style>
canvas {
    border: 1px solid #d3d3d3;
    background-color: #f1f1f1;
    position: absolute;
    top: 0px; left: 0px;
    z-index: 10;
}
.button {
    background-color: #FAFAFA;
    border: 1px solid black;
    width:200px;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition-duration: 0.4s;
}
.button:focus {
  outline: none;
}
.button:active {
    background-color: #e7e7e7;
}
        </style>
    </head>
    <body>
        <div style = "width:1200px; height:600px; border:1px solid #000; text-align: center; vertical-align:middle; display: table-cell;">
            <ul style = "list-style-type: none;">
                <li><button class = "button" onclick = "startGame()">Start</button></li>
                <li><button class = "button">Records</button></li>
            </ul>
        </div>
        <p id="footer"></p>

        <script>

function startGame() {
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 600;
        this.canvas.height = 450;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.getElementById("footer"));
        ctx = myGameArea.context;
        ctx.fillStyle = "red";
        ctx.fillRect(0, 0, 50, 50);
    }
}

        </script>
    </body>
</html>