HTML Canvas Curves
HTML Canvas Curves facilitate the arc() method for making a circle or a part of a circle on the canvas. There are various attributes in the arc(x, y, r, s, e) method such as x and y defining the coordinates of the center of the circle, r defining the radius, s defining the start angle, and e defining the end angle.
Syntax
context.arc(90, 100, 50, 0, Math.PI);
Attributes
- x: It defines the coordinates of the center of the circle
- y: It defines the coordinates of the center of the circle
- r: It defines the radius of the circle
- beginPath(): This method is used to begin the path
- For making a circle start with 0 and end with 2*Math.PI
Example: In this example, we will see the implementation of the above method with an example.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >HTML CANVAS Curve</ title > < link rel = "stylesheet" href = "style.css" > </ head > < body > < h1 class = "Beginner" >w3wiki </ h1 > < h3 >HTML Canvas Curve</ h3 > < div class = "box" > < canvas height = "200" width = "200" id = "canvas1" class = "canvas-border" > </ canvas > < canvas height = "200" width = "200" id = "canvas2" class = "canvas-border" > </ canvas > < canvas height = "200" width = "200" id = "canvas3" class = "canvas-border" > </ canvas > < canvas height = "200" width = "200" id = "canvas4" class = "canvas-border" > </ canvas > </ div > < script src = "script.js" ></ script > </ body > </ html > |
CSS
/* styles.css */ @import url ( 'https://fonts.googleapis.com/css2?family=Poppins&display=swap' ); body { font-family : 'Poppins' , sans-serif ; } .Beginner { font-size : 40px ; color : green ; } .canvas-border { border : 5px solid black ; } .box { display : flex; flex-wrap: wrap; gap: 10px ; } |
Javascript
// script.js const canvas1 = document .getElementById( "canvas1" ) const context1 = canvas1 .getContext( "2d" ); context1.beginPath(); context1.strokeStyle = "green" ; context1.arc(90, 100, 50, 0, Math.PI); context1.lineWidth = 3; context1.stroke() const canvas2 = document .getElementById( "canvas2" ) const context2 = canvas2 .getContext( "2d" ); context2.beginPath(); context2.strokeStyle = "red" ; context2.arc(90, 100, 50, 0, 0.5 * Math.PI); context2.lineWidth = 3; context2.stroke() const canvas3 = document .getElementById( "canvas3" ) const context3 = canvas3 .getContext( "2d" ); context3.beginPath(); context3.strokeStyle = "blue" ; context3.arc(90, 100, 50, 0, 1.5 * Math.PI); context3.lineWidth = 3; context3.stroke() const canvas4 = document .getElementById( "canvas4" ) const context4 = canvas4 .getContext( "2d" ); context4.beginPath(); context4.strokeStyle = "blueviolet" ; context4.arc(90, 100, 50, 0, Math.PI); context4.lineWidth = 3; context4.stroke(); |
Output: