I'm attempting to create a simple game in javascript, but I've run into an issue where my circle isn't perfectly round. Despite searching for solutions online for 20 minutes, I haven't been able to resolve the problem. I'm hoping someone here can offer some guidance.
My question is: Why is my circle not appearing as a perfect round shape?
function Canvas() {
var ctx = document.getElementById('game').getContext('2d');
var cw = ctx.canvas.width,
ch = ctx.canvas.height;
var speed = 1;
function Ball() {
this.w = 20, this.h = 10, this.x = (cw * 0.5) - (this.w * 0.5), this.y = (ch * 0.5) - (this.h * 0.5), this.color = "black";
this.draw = function() {
//animation
this.x = this.x + 1;
//draw
ctx.beginPath();
ctx.arc(this.x, this.y, this.w, 0, (Math.PI / 180) * 360);
ctx.fillStyle = "black";
ctx.closePath();
ctx.fill();
}
}
function Background() {
this.w = cw, this.h = ch, this.x = 0, this.y = 0, this.color = "#F4F4F5";
this.draw = function() {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.w, this.h);
}
}
var ball = new Ball();
var background = new Background();
function draw() {
ctx.save();
ctx.clearRect(0, 0, cw, ch);
//draw
background.draw();
ball.draw();
ctx.restore();
}
var animateInterval = setInterval(draw, speed);
}
window.addEventListener('load', function(event) {
Canvas();
}); #game {
width: 500px;
height: 500px;
background-color: ;
border-style: solid;
border-width: 4px;
border-radius: 4px;
border-color: #A2A2A9;
}<html>
<head>
</head>
<body>
<canvas id="game">
Please upgrade your browser!
</canvas>
</body>
<html>