JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<body onload="init();">
<div id="gameArea">
<canvas id="viewport" width="400" height="300"></canvas>
</div>
</body>
</html>

CSS

html,body{width:100%;height:100%;margin:0px;}

#gameArea{width:400px;height:300px;margin:0px auto;}
#viewport{border:1px solid #000;margin:5px 0px 0px;}

JavaScript

var viewport = document.getElementById('viewport');
var ctx = viewport.getContext('2d');
console.log(ctx);
var fps = 30;

function init(){
defaultBall();
    for(i=0;i<balls.length;i++){
        balls[i].draw();
    }
    ball.draw();
}

function Ball(X, Y, Radius, Color){
    this.X = X || 0;
    this.Y = Y || 0;
    this.radius = 5;
    this.color = Color;
}
Ball.prototype.draw = function(){
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.X, this.Y, this.radius, 10, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
}

var balls = [];

function defaultBall(){
    addBall(new Ball(50, 50, 5, '#6B7E00'));
    addBall(new Ball(150, 50, 5, '#6B7E00'));
}

function addBall(ball){
    balls.push(ball);
}
var ball = new Ball(50, 50, 5, '#6B7E00');

function mousePosition(obj){
this.X = this.Y = 0;
if (obj.offsetParent){
    this.X += obj.offsetLeft;
    this.Y += obj.offsetTop;
}
return [this.X,this.Y];
}
CO = mousePosition(viewport);

var mouse = [0, 0];
var mouseX; var mouseY;

function onclick(e){
    mouseX = e.pageX - self.CO[0];
    mouseY = e.pageY - self.CO[1];
    addBall(new Ball(mouseX, mouseY, 5, '#6B7E00'));
    alert(balls.length);
}
viewport.addEventListener("click", onclick);