JSFiddle - React, Tailwind, and code Playground

HTML

<p id="output">Hello</p>

JavaScript

var canvas = document.getElementById("pong");
var ctx = canvas.getContext('2d');
function Ball(ball_data){
    this.start_x = ball_data.x;
    this.start_y = ball_data.y;
    this.x = ball_data.x;
    this.y = ball_data.y;
    this.dx = ball_data.dx;
    this.dy = ball_data.dy;
    this.speed = 1;
    this.width = ball_data.width;
    this.height = ball_data.height;    
    this.color = ball_data.color;
    this.context = ball_data.context;
    alert(this);
    return this;
}
Ball.prototype.move = function(){
    if(this.y < 0 || this.y > (400 - this.height)){
        this.veticalCollision();
    }
    else if(this.x > (800 - this.width)){
        this.horizontalCollision();
    }
    else if(this.x < 0){
        this.horizontalCollision();
    }            
    this.x += this.dx;
    this.y += this.dy;
}
Ball.prototype.horizontalCollision = function(){
    this.dx *= -1;
}
Ball.prototype.verticalCollision = function(){
    this.dy *= -1;
}
Ball.prototype.draw = function(){
    alert(this);
    this.context.fillStyle = this.color;
    this.context.fillRect(this.x, this.y, this.width, this.height);
}
Ball.prototype.reset = function(direction){
    this.y = this.start_y;
    this.x = this.start_x;
    this.dx = direction * that.randInt(1, 5);
    this.dy = that.randInt(1 , 5);
}
var ball = new Ball({
    x: 400,
    y: 200,
    dx: 2,
    dy: 3,
    width: 10,
    height: 10,
    color: "white",
    context: ctx
});
setInterval(ball.draw, 50);