how to create a circle out of a square in html

You can use quadratic curves to "round-out" the straight lines of your square until they form a circle.

enter image description here

            // change sideCount to the # of poly sides desired // var sideCount = 4;   var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.lineWidth = 2; ctx.fillStyle = randomColor();  var PI2 = Math.PI * 2; var cx = 150; var cy = 150; var radius = 100;  var xx = function (a) {   return (cx + radius * Math.cos(a)); } var yy = function (a) {   return (cy + radius * Math.sin(a)); } var lerp = function (a, b, x) {   return (a + x * (b - a)); }  var sides = []; for (var i = 0; i < sideCount; i++) {   sides.push(makeSide(i, sideCount)); }  var percent = 0; var percentDirection = 0.50;  $("#toShape").click(function () {   percentDirection = -0.50; })  $("#toCircle").click(function () {   percentDirection = 0.50; })  animate();  // functions  function animate() {   requestAnimationFrame(animate);   drawSides(percent);   percent += percentDirection;   if (percent > 100) {     percent = 100;   }   if (percent < 0) {     percent = 0;   } }  function drawSides(pct, color) {   ctx.clearRect(0, 0, canvas.width, canvas.height);   if (pct == 100) {     ctx.beginPath();     ctx.arc(cx, cy, radius, 0, PI2);     ctx.closePath();     ctx.fill();   } else {     ctx.beginPath();     ctx.moveTo(sides[0].x0, sides[0].y0);     for (var i = 0; i < sideCount; i++) {       var side = sides[i];       var cpx = lerp(side.midX, side.cpX, pct / 100);       var cpy = lerp(side.midY, side.cpY, pct / 100);       ctx.quadraticCurveTo(cpx, cpy, side.x2, side.y2);     }     ctx.fill();   } }  function makeSide(n, sideCount) {   var sweep = PI2 / sideCount;   var sAngle = sweep * (n - 1);   var eAngle = sweep * n;    var x0 = xx(sAngle);   var y0 = yy(sAngle);   var x1 = xx((eAngle + sAngle) / 2);   var y1 = yy((eAngle + sAngle) / 2);   var x2 = xx(eAngle);   var y2 = yy(eAngle);    var dx = x2 - x1;   var dy = y2 - y1;   var a = Math.atan2(dy, dx);   var midX = lerp(x0, x2, 0.50);   var midY = lerp(y0, y2, 0.50);   var cpX = 2 * x1 - x0 / 2 - x2 / 2;   var cpY = 2 * y1 - y0 / 2 - y2 / 2;    return ({     x0: x0,     y0: y0,     x2: x2,     y2: y2,     midX: midX,     midY: midY,     cpX: cpX,     cpY: cpY,     color: randomColor()   }); }  function randomColor() {   return ('#' + Math.floor(Math.random() * 16777215).toString(16)); }

            body{ background-color: ivory; } canvas{border:1px solid red;}

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button id="toShape">Animate to Shape</button> <button id="toCircle">Animate to Circle</button><br> <canvas id="canvas" width=300 height=300></canvas>