Draw an semi arc using HTML5 canvas

Html programming,

All Answers

YasminRadwan26

2022-05-15

need an explanation for this answer? contact us directly to get an explanation for this answer

Solution

HTML5 canvas element is used to draw graphics, animation, dynamic images, diagram, text to enhance the user experience. We can draw arcs on canvas using the arc() method.

Syntax of arc()

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

Here, x and y are the coordinates of the circle's center, radius is the radius of circle, the startAngle and the endAngle parameters are for the start and end points of the arc in radians from the x axis. The anticlockwise parameter is a boolean value which when true draws the arc anticlockwise, otherwise in a clockwise direction.

Here is the HTML5 code to draw the semi arc using Canvas.

<!DOCTYPE HTML> 
<html> 
<head> 
<script>
window.onload = function()
{
canvas = document.getElementById("canvasArea");
context = canvas.getContext("2d");
drawArc ( 100, 25, 80, 0, 180, false, "#97C30A", "#FF717E");
function drawArc(xPos, yPos, radius, startAngle, endAngle,
anticlockwise, lineColor, fillColor)
{
var startAngle = startAngle * (Math.PI/180);
var endAngle = endAngle * (Math.PI/180);
var radius = radius;

context.strokeStyle = lineColor;
context.fillStyle = fillColor;
context.lineWidth = 8;
context.beginPath();
context.arc(xPos, yPos, radius, startAngle, endAngle, anticlockwise);
context.fill();
context.stroke();
}
}
</script> 
</head> 
<body>
<div style = "width:240px; height:140px; margin:0 auto; padding:5px;">
<canvas id = "canvasArea" width = "210" height = "130"
style = "border:2px solid black">
Your browser doesn’t currently support HTML5 Canvas.
</canvas> 
</div> 
</body> 
</html>

Output of the above code -

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

Draw an semi arc using HTML5 canvas

All Answers

Solution

Syntax of arc()

HTML5 programming Exercises

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now