print filled circle in javascript

To print a filled circle in JavaScript you can use the Canvas API. Here is an example code snippet that draws a filled circle using the Canvas API:

index.tsx
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const radius = 50;
context.beginPath();
context.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI, false);
context.fillStyle = "#FF0000";
context.fill();
261 chars
8 lines

Here, we first get the Canvas element by its ID, and then get the 2D context of the canvas. We then specify the radius of the circle and call beginPath() to start the path for the circle. We use arc() method to draw a circle at the center of the canvas by providing its x and y coordinates along with the radius. The last three parameters of arc() method are the start angle, end angle, and direction in which to draw the circle, respectively.

After defining the path of the circle, we set the fill color using fillStyle property of the 2D context, and then call fill() to fill the circle with the specified color.

You can modify the radius, fill color, and position of the circle as per your requirement.

related categories

gistlibby LogSnag