Developing the HTML canvas
Let's start by creating an HTML canvas in which the game will take place. The HTML for our code belongs in ~/pong/views/index.ejs. You'll find an existing index.ejs file there from the skeleton you just cloned. We will replace the contents of index.ejs with the following code.
We want to write a simple page that creates an HTML5 canvas element. The logic that drives the canvas will be placed in the pong.js file we're about to write. Enter the following code into index.ejs:
<!DOCTYPE html>
<html>
<head>
<title>XMPP Pong</title>
<style type="text/css">
body { background-color: #eee; }
#container { margin:0 auto; width: 640px; }
#pong { border: 1px solid; background-color: #fff; }
</style>
</head>
<body>
<div id="container">
<h1>XMPP Pong </h1>
<!-- More to be filled in here soon...
