JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="gameWindow">
        <canvas id="gameCanvas" width="500" height="500">
        </canvas>
    </div>
</body>

CSS

#gameWindow {
		height: 500px;
		width: 500px;
		border: 5px solid #555;
		top:auto;
		left:auto;
		margin: 250px auto auto auto;
		top:200px;
		font-family:"Courier New", Courier, monospace;
		font-size:20px;
		text-align:center;
		line-height: 40px;
	}

JavaScript

//canvas
var c = document.getElementById("gameCanvas");
var ctx = c.getContext("2d");
//baseball
var baseball = new Image();
baseball.onload = function() {
    ctx.drawImage(baseball, 300, 325);
};
baseball.src = "http://a3.mzstatic.com/us/r30/Purple6/v4/aa/65/fe/aa65fe9a-9a78-2abb-567c-d439c782d9c8/mzl.xwveiniy.175x175-75.jpg";
//ball movement
var baseballX = 0;
var baseballY = 0;