The ability to draw a circle is a significant feature of the JavaScript programming language. JavaScript serves as a web application programming language that facilitates the execution of various functions. The JavaScript function is utilized to incorporate essential functionalities into web pages.
We constructed both an empty and a filled circle on a web page utilizing single and multiple colors. Developers are engaging with JavaScript to necessitate a "canvas," similar to how an artist needs a canvas to produce artwork.
A JavaScript canvas is utilized to display a rectangular figure within an HTML document. By leveraging JavaScript Canvas alongside various techniques, we can incorporate colors, generate shapes (such as circles), and produce digital artwork.
Setting the Canvas
- We are initializing the JavaScript canvas. This step is essential prior to beginning the process of rendering a circle on the webpage with JavaScript.
We have the ability to establish the canvas for 2D animation as illustrated below.
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
- We have obtained a reference to the canvas using the getElementById function. Imagine this is locating your canvas using a unique identifier among a stack of canvases.
- The javascript function is showing a 2D drawing using the "getContext('2d') " on the web page.
- Imaging, we are preparing our brush for painting on the canvas. Use the '2d' symbol in the script tag for a two-dimensional context.
Drawing a JavaScript Circle
We utilize the arc function to create circles with a specialized instrument from our collection of tools.
The arc necessitates a total of six parameters method: The coordinates of the circle are defined as follows: - x represents the x-coordinate of the circle; - y denotes the y-coordinate of the circle; - radius indicates the size of the circle; - startAngle specifies the starting point in radians for the circle; - endAngle defines the ending point in radians for the circle; - anticlockwise is a Boolean value that determines the direction of the circle's drawing.
This describes how to draw a circle:
context.beginPath();
context.arc(50, 50, 50, 0, 2 * Math.PI, false);
context.fillStyle = 'red';
context.fill();
context.lineWidth = 5;
context.strokeStyle = '#003300';
context.stroke();
- In this case, the beginPath method is the first and required method, and it applies first.
- You are using the beginPath method to introduce the brush: "Hey, I want to start a new drawing on the canvas."
- Then, to draw a circle, we invoke the arc method with the specified arguments. The circle will have the following dimensions: radius = 50, start at 0 radians, end at 2 * Math, and coordinates = 100, 100.PI radians, or a complete circle, and will be depicted in a clockwise manner.
- The Javascript circle fill method provides a colour for the circle, and the "fillStyle" parameter applies the colour. Consider that we are selecting a paint colour and then using that colour for the circle.
- The "lineWidth" property is used to set the circle's width. We used the property to set the colour using the strokeStyle property. The circle stroke property is used to apply the circle using the stroke method. This method works for selecting the pencil and drawing the outline of the circle.
Examples
The subsequent examples demonstrate the utilization of the circle through a JavaScript function.
Example 1:
The subsequent illustration demonstrates a fundamental circle created using JavaScript functions along with style tags.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> Draw a circle using javascript </title>
</head>
<body onload = "draw_circle();" style = "background-color:grey;">
<h4 style = "color:pink;"> Draw a circle using javascript </h4>
<canvas id = "circle_shape" width = "190" height = "100"></canvas>
<script>
function draw_circle()
{
var canvas = document.getElementById('circle_shape');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
var X = canvas.width / 2;
var Y = canvas.height / 2;
var R = 40;
ctx.beginPath();
ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
ctx.lineWidth = 5;
ctx.strokeStyle = '#FF00ff';
ctx.stroke();
}
}
</script>
</body>
</html>
Output
The result displays the necessary circle created with JavaScript.
Example 2:
The subsequent illustration demonstrates how to create a filled circle utilizing JavaScript functions in conjunction with style tags.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> Draw a circle using javascript </title>
</head>
<body onload = "draw_circle();" style = "background-color:grey;">
<h4 style = "color:pink;"> Draw a filled circle using javascript </h4>
<canvas id = "circle_shape" width = "190" height = "100"></canvas>
<script>
function draw_circle()
{
var canvas = document.getElementById('circle_shape');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
var X = canvas.width / 2;
var Y = canvas.height / 2;
var R = 40;
ctx.beginPath();
ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
ctx.lineWidth = 5;
ctx.fillStyle = '#FF00ff';
ctx.stroke();
ctx.fill();
}
}
</script>
</body>
</html>
Output
The result displays the necessary circle rendered through JavaScript.
Example 3:
The example below illustrates how to create a filled and multicolored circle utilizing JavaScript functions along with style tags.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> Draw a circle using javascript </title>
</head>
<body onload = "draw_circle();" style = "background-color:grey;">
<h4 style = "color:pink;"> Draw a filled circle using javascript </h4>
<canvas id = "circle_shape" width = "190" height = "100"></canvas>
<script>
function draw_circle()
{
var canvas = document.getElementById('circle_shape');
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
var X = canvas.width / 2;
var Y = canvas.height / 2;
var R = 40;
ctx.beginPath();
ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
ctx.lineWidth = 15;
ctx.strokeStyle = 'aqua';
ctx.fillStyle = '#FF00ff';
ctx.stroke();
ctx.fill();
}
}
</script>
</body>
</html>
Output
The result displays the necessary circle created with JavaScript.
Conclusion
JavaScript can be likened to a toolkit for digital creators. It offers an array of functionalities and methods, such as arc, designed for the manipulation and creation of visual content. While the act of drawing a circle may appear to be a simple task, it actually signifies a considerable enhancement in understanding how JavaScript can facilitate interactions with the HTML canvas.