how to create a circle object in javascript with canvas code example

Example 1: javascript draw circle on canvas

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = "red";
ctx.fill();

Example 2: javascript canvas ground zero

// JS Canvas Ground-Zero

/*HTML init:
<canvas id="my_canvas" width="width" height="height">
  </canvas>*/

let c = document.getElementById("my_canvas");
let ctx = c.getContext("2d");

// Color : 
ctx.fillStyle = "red";
ctx.strokeStyle = "#ecf0f1";

// Stroke
let ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(200,200);
ctx.moveTo(200,50);
ctx.lineTo(50,200);
ctx.closePath();

// Line style
ctx.lineJoin = "bevel"; // round - bevel - miter
ctx.lineCap = "round"; // butt - round - square

// Shapes
ctx.fillRect(x, y, width, height);
ctx.arc(x, y, radius, startAngle, Math.PI, flow(true/false));
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, destx, desty);
ctx.quadraticCurveTo(cp1x, cp1y, destx, desty);