JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>RPG Game</title>
<link rel="stylesheet" type="text/css" href="style/main.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="js/main.js" type="text/javascript"></script>
</head>
<body onLoad="initMain()">
<div id="containGame">
    <!--Canvas-->
    <canvas id="canMain">
        <p>UPGRADE YOUR NETTERWEB!</p>
    </canvas>
    <!--Menu-->
    <div id="menuMain">
        <ul> 

        <li class="menuItemMain"><a href="#">Item</a></li>
        <li class="menuItemMain"><a href="#">Item</a></li>
        <li class="menuItemMain"><a href="#">Item</a></li>
        <li class="menuItemMain"><a href="#">Item</a></li>
        <li class="menuItemMain"><a href="#">Item</a></li>

        </ul> 
    </div>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
a{
    color: #fff;
    vertical-align: middle;
    text-decoration: none;
}
h1{
    line-height: 0px;
}
body
{
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
}
#containGame
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #999;
}

/* Landscape */
@media all and (orientation:landscape) {
#canMain
{
    float: left;
    width: 75%;
    height: 100%;
    border: 0px solid #000;
}
#menuMain
{
    float: right;
    width: 25%;
    top: 0%;
    height: 100%;
    border: 0px solid #000;
    background: #666;
    font-size: 2em;
    font-family: sans-serif;
}
#menuMain ul{
    position: relative;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #444;
}
#menuMain ul li{
    margin: auto;
    height: 20%;
    line-height: 5em;
    text-align: middle;
    vertical-align: middle;
    list-style: none;
}
}

/* Portrait */
@media all and (orientation:portrait) {
#canMain
{
    width: 100%;
    height: 80%;
    border: 0px solid #000;
}
#menuMain
{
    width: 100%;
    height: 20%;
    border: 0px solid #000;
    background: #444;
    font-size: 37px;
    font-family: sans-serif;
}
#menuMain ul {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: #444;

}
#menuMain ul li {
    float: left;
    height: 100%;
    width: 20%;
    padding-top: 35px;
    list-style: none;
    background-color: #444;

}
}

JavaScript

function initMain() {
    var canMain = document.getElementById("canMain");
    if(canMain.getContext) {
        var ctxMain = canMain.getContext('2d');
        //determine canvas size from window size
        //consider using document.body.clientWidth
        ctxMain.beginPath();  
ctxMain.moveTo(100,100);  
ctxMain.quadraticCurveTo(25,25,25,62.5);  
ctxMain.quadraticCurveTo(25,100,50,100);  
ctxMain.quadraticCurveTo(50,120,30,125);  
ctxMain.quadraticCurveTo(60,120,65,100);  
ctxMain.quadraticCurveTo(125,100,125,62.5);  
ctxMain.quadraticCurveTo(125,25,75,25);  
ctxMain.stroke();  
    }
}