No matter how hard I try, drawing a perfect circle seems impossible for me. Every time I attempt it, all I manage to create is an ellipse. Check out this code snippet I put together as an example:
function canvasClicked(number) {
var c = "canvas" + number;
var canvas = document.getElementById(c);
var context = canvas.getContext("2d");
var centerX = 150;
var centerY = 75;
context.beginPath();
context.arc(centerX, centerY, 70, 0, Math.PI * 2);
context.lineWidth = 10;
context.strokeStyle = "red";
context.stroke();
}#canvas1 {
width: 200px;
height: 200px;
border: 1px solid black;
}
<canvas id="canvas1" onclick="canvasClicked(1)"></canvas>Despite my efforts to figure out why this is happening, I can't seem to pinpoint the exact cause. The common suggestion is to set centerX and centerY to element.width / 2 and element.height / 2 respectively, but doing so only results in an even more distorted shape, pushing the ellipse further away from the center of the canvas.