<canvas id="pongCanvas" width="500" height="300" style="border:1px solid;">
                Your browser doesn't seam to support canvas https://caniuse.com/#search=canvas
            </canvas>
            <script>
                    var canvas = document.getElementById("pongCanvas");
                    var ctx = canvas.getContext("2d");
                    var xPos = 500/2;
                    var yPos = 300/2;
                    var goUp = false;
                    var goRight = false;
                    var size = 10;
                    var xPlayer = 20;
                    var yPlayer = 70;
                    setInterval(loop, 0);
                    var playerOneY = 300 / 2;
                    var playerTwoY = 300 / 2;
                                        var doesPlayerOneUp = false;
                                        var doesPlayerOneDown = false;
                                        document.addEventListener('keydown', function(event) {
                                            if(event.keyCode == 38) {
                                                    doesPlayerOneUp = true;
                                            }
                                            else if(event.keyCode == 40) {
                                                    doesPlayerOneDown = true;
                                            }
                                        });
                                        document.addEventListener('keyup', function(event) {
                                            if(event.keyCode == 38) {
                                                    doesPlayerOneUp = false;
                                            }
                                            else if(event.keyCode == 40) {
                                                    doesPlayerOneDown = false;
                                            }
                                        });
                    function drawPlayer(x, y)
                    {
                        ctx.moveTo(x,y);
                        ctx.lineTo(x + xPlayer, y);
                        ctx.moveTo(x,y);
                        ctx.lineTo(x, y + yPlayer);
                        ctx.moveTo(x + xPlayer, y);
                        ctx.lineTo(x + xPlayer, y + yPlayer);
                        ctx.moveTo(x,y + yPlayer);
                        ctx.lineTo(x + xPlayer, y + yPlayer);
                    }
                    function loop()
                    {
                        ctx.beginPath();
                        ctx.arc(xPos,yPos,size,0,2*Math.PI);
                        drawPlayer(0, playerOneY);
                        drawPlayer(500 - xPlayer, playerTwoY);
                        ctx.clearRect(0, 0, canvas.width, canvas.height);
                        ctx.stroke();
                        xPos += (goRight) ? (-1) : (1);
                        yPos += (goUp) ? (-1) : (1);
                        if (xPos + size == 500 - xPlayer) goRight = true;
                                                else if (xPos - size == xPlayer) {
                                                    if (playerOneY + yPlayer + yPlayer / 2 > yPos + size
                                                    && playerOneY - yPlayer / 2 < yPos - size)
                                                        goRight = false;
                                                }
                        if (yPos - size == 0 || yPos + size == 300) goUp = !goUp;
                        if (!goRight)
                        {
                            if (playerTwoY + yPlayer < 300 && yPos > playerTwoY + yPlayer / 2) playerTwoY += 1;
                            else if (playerTwoY > 0 && yPos < playerTwoY + yPlayer / 2) playerTwoY -= 1;
                        }
                                                if (doesPlayerOneUp && playerOneY > 0 && yPos < playerOneY + yPlayer / 2) {
                                                    playerOneY -= 1;
                                                }
                                                if (doesPlayerOneDown && playerOneY + yPlayer < 300 && yPos > playerOneY + yPlayer / 2) {
                                                    playerOneY += 1;
                                                }
                                                if (xPos < 0) {
                                                    xPos = 500/2;
                                                    yPos = 300/2;
                                                }
                    }
            </script>