Canvas Path tutorials-1
arc (a path command)
context.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle)
Draws a circular arc given a centerpoint, radius and starting & ending angles. The angles are expressed as radians.
To convert degrees to radians you can use this formula: radians = degrees * Math.PI / 180;. Angle 0 faces directly rightward from the center of the arc.
By default, the arc is drawn clockwise, An optional [true|false] parameter instructs the arc to be drawn counterclockwise: context.arc(10,10,20,0,Math.PI*2,true)
To draw a complete circle you can make endingAngle = startingAngle + 360 degrees (360 degrees == Math.PI2).
quadraticCurveTo (a path command)
context.quadraticCurveTo(controlX, controlY, endingX, endingY)
Draws a quadratic curve starting at the current pen location to a given ending coordinate. Another given control coordinate determines the shape (curviness) of the curve.
bezierCurveTo (a path command)
context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY)
Draws a cubic Bezier curve starting at the current pen location to a given ending coordinate. Another 2 given control coordinates determine the shape (curviness) of the curve.
arcTo (a path command)
context.arcTo(pointX1, pointY1, pointX2, pointY2, radius);
Draws a circular arc with a given radius. The arc is drawn clockwise inside the wedge formed by the current pen location and given two points: Point1 & Point2.A line connecting the current pen location and the start of the arc is automatically drawn preceding the arc.
rect (a path command)
context.rect(leftX, topY, width, height)
Draws a rectangle given a top-left corner and a width & height.
The context.rect is a unique drawing command because it adds disconnected rectangles.
These disconnected rectangles are not automatically connected by lines.
closePath (a path command)
Draws a line from the current pen location back to the beginning path coordinate. For example, if you draw 2 lines forming 2 legs of a triangle, closePath will "close" the triangle by drawing the third leg of the triangle from the 2nd leg's endpoint back to the first leg's starting point.
A Misconception explained!
This command's name often causes it to be misunderstood. context.closePath is NOT an ending delimiter to context.beginPath. Again, the closePath command draws a line -- it does not "close" a beginPath.
This example draws 2 legs of a triangle and uses closePath to complete (close?!) the triangle by drawing the third leg. What closePath is actually doing is drawing a line from the second leg's endpoint back to the first leg's starting point.
beginPath (a path command)
Begins assembling a new set of path commands and also discards any previously assembled path. It also moves the drawing "pen" to the top-left origin of the canvas (==coordinate[0,0]).
Although optional, you should ALWAYS start a path with beginPath
The discarding is an important and often overlooked point. If you don't begin a new path with beginPath, any previously issued path commands will automatically be redrawn.
These 2 demos both attempt to draw an "X" with one red stroke and one blue stroke. This first demo correctly uses beginPath to start it's second red stroke. The result is that the "X" correctly has both a red and a blue stroke.
This second demo incorrectly leaves out beginPath on the second stroke. The result is that the "X" incorrectly has both red strokes.
The second stroke() is draws the second red stroke.
But without a second beginPath, that same second stroke() also incorrectly redraws the first stroke. Since the second stroke() is now styled as red, the first blue stroke is overwritten by an incorrectly colored red stroke.
lineCap (a path styling attribute)
context.lineCap=capStyle // butt (default), round, square
Sets the cap style of line starting points and ending points.
- butt, the default lineCap style, shows squared caps that do not extend beyond the line's starting and ending points.
- round, shows rounded caps that extend beyond the line's starting and ending points.
- square, shows squared caps that extend beyond the line's starting and ending points.
lineJoin (a path styling attribute)
context.lineJoin=joinStyle // miter (default), round, bevel
Sets the style used to connect adjoining line segments.
- miter, the default, joins line segments with a sharp joint.
- round, joins line segments with a rounded joint.
- bevel, joins line segments with a blunted joint.
strokeStyle (a path styling attribute)
Sets the color that will be used to stroke the outline of the current path.
These are color options (these must be quoted):
- A CSS named color, for example context.strokeStyle='red'
- A hex color, for example context.strokeStyle='#FF0000'
- An RGB color, for example context.strokeStyle='rgb(red,green,blue)' where red, green & blue are integers 0-255 indicating the strength of each component color.
- An HSL color, for example context.strokeStyle='hsl(hue,saturation,lightness)' where hue is an integer 0-360 on the color wheel and saturation & lightness are percentages (0-100%) indicating the strength of each component.
- An HSLA color, for example context.strokeStyle='hsl(hue,saturation,lightness,alpha)' where hue is an integer 0-360 on the color wheel and saturation & lightness are percentages (0-100%) indicating the strength of each component and alpha is a decimal value 0.00-1.00 indicating the opacity.
You can also specify these color options (these options are objects created by the context):
- A linear gradient which is a linear gradient object created with context.createLinearGradient
- A radial gradient which is a radial gradient object created with context.createRadialGradient
- A pattern which is a pattern object created with context.createPattern
ATutorialHub Related Guide
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2
Sea battle game only using HTML and CSS
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website