Drawing circle in javascript

CanvasRenderingContext2D: arc() method

The CanvasRenderingContext2D.arc() method of the Canvas 2D API adds a circular arc to the current sub-path.

Syntax

arc(x, y, radius, startAngle, endAngle) arc(x, y, radius, startAngle, endAngle, counterclockwise) 

The arc() method creates a circular arc centered at (x, y) with a radius of radius . The path starts at startAngle , ends at endAngle , and travels in the direction given by counterclockwise (defaulting to clockwise).

Parameters

The horizontal coordinate of the arc’s center.

The vertical coordinate of the arc’s center.

The arc’s radius. Must be positive.

The angle at which the arc starts in radians, measured from the positive x-axis.

The angle at which the arc ends in radians, measured from the positive x-axis.

An optional boolean value. If true , draws the arc counter-clockwise between the start and end angles. The default is false (clockwise).

Return value

Examples

Drawing a full circle

This example draws a complete circle with the arc() method.

HTML

JavaScript

The arc is given an x-coordinate of 100, a y-coordinate of 75, and a radius of 50. To make a full circle, the arc begins at an angle of 0 radians (0°), and ends at an angle of 2π radians (360°).

const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 2 * Math.PI); ctx.stroke(); 

Result

Different shapes demonstrated

This example draws various shapes to show what is possible with arc() .

canvas width="150" height="200">canvas> 

const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // Draw shapes for (let i = 0; i  3; i++)  for (let j = 0; j  2; j++)  ctx.beginPath(); let x = 25 + j * 50; // x coordinate let y = 25 + i * 50; // y coordinate let radius = 20; // Arc radius let startAngle = 0; // Starting point on circle let endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle let counterclockwise = i % 2 === 1; // Draw counterclockwise ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise); if (i > 1)  ctx.fill(); > else  ctx.stroke(); > > > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Drawing Shapes Using HTML5 Canvas — Part 3: Drawing Circles

In this lesson we will continue the series on how to use the HTML5 Canvas to drawn shapes. I will show you how to draw a circle using the HTML Canvas. The process relies on a little bit of mathematical knowledge.

In Part 2 of this series we considered how coordinates are referenced i.e. starting with (0, 0) at the top left hand side of the canvas, with the positive direction being horizontally to the right and down the canvas.

To draw a circle all we need to do is give the location of the centre of the circle and the start and finish angles as follows:

arc(x-ordinate, y-ordinate, radius, start angle, end angle)

To draw a circle with centre (100, 80) and a radius of 50 the full code would look something like this:

Line 18: You will notice that the angles are given in radians. The starting position is at the 3 o’clock position and will rotate in a clockwise direction through 2 Pi radians i.e. a full circle.

It may help to look at a drawing of a circle with the angles marked.

HOW TO DRAW A SEMI-CIRCLE USING HTML CANVAS

Drawing a semi-circle can be achieved by specifying the start and end angles. Taking the previous example, if we wanted to start at the 6 o’clock position and draw a semi-circle then we would use:

HOW TO DRAW AN ARC IN AN ANTI-CLOCKWISE DIRECTION USING HTML CANVAS

By default the arc is drawn in a clockwise direction but we can specify an additional parameter to draw in an anti-clockwise direction as follows:

If the last parameter is set to true then the arc will be drawn in an anti-clockwise direction. If set to false then it will be drawn in a clockwise direction. Note that the default direction is clockwise so there is no need to include the parameter.

HAS THIS ARTICLE BEEN USEFUL ?

Has this article been useful? Then consider making a small donation now to help support this site. Your donation will go towards the running costs associated with the site. You can have your name listed as a page sponsor, if you wish!

HOW TO DRAW A FILLED CIRCLE USING THE HTML CANVAS

To draw a solid circle then all you need to do is add the fill() function as follows:

HOW TO CHANGE THE FILL COLOR OF A HTML CANVAS CIRCLE

If you would like to change the full color then simply use the fillStyle function as follows:

Источник

Canvas arc() Method

The arc() method creates a circle or a part of a circle.

Use the stroke() or fill() method to draw the path.

Note

To create a circle: Set start angle to 0 and end angle to 2*Math.PI.

To create half a circle: Set start angle to 0 and end angle to Math.PI.

See Also:

Syntax

Parameter Values

Param	Description	Play it
x	The x-coordinate of the center of the circle	Play it »
y	The y-coordinate of the center of the circle	Play it »
r	The radius of the circle	Play it »
sAngle	The starting angle, in radians (0 is at the 3 o’clock position of the arc’s circle)	Play it »
eAngle	The ending angle, in radians	Play it »
counterclockwise	Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.	Play it »

Return Value

More Examples

Example

const canvas = document.getElementById(«myCanvas»);
const ctx = canvas.getContext(«2d»);

Browser Support

The element is an HTML5 standard (2014).

arc() is supported in all modern browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

❮ Canvas Reference

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник