Learn html - html tutorial - Miterlimit property in html5 canvas - html examples - html programs
- The miterLimit property sets the maximum miter length.
- The miter length is the distance between the inner and the outer corner where two lines meet.
- The miter length become bigger as the angle of the corner makes smaller.
- If the miter length go beyond the miterLimit value, the corner will be shown as lineJoin type "bevel" (Fig 3) as shown as above.
Syntax for miterLimit property in HTML5 Canvas:
Property Values of miterLimit property in HTML5 Canvas:
||Defines the maximum miter length.
Sample Coding for miterLimit property in HTML5 Canvas:
Code Explanation for miterLimit property in HTML5 Canvas:
- “wikitechyCanvas” is used to declare the id value of the canvas tag.
- The getElementById(); method is used to get the canvas element with the specific id (“wikitechyCanvas”).
- ml.getContext(“2d”)a method is returns a two-dimensional drawing context on the canvas.
- mlx.lineWidth=10 is used to draw a line with a width of 10 pixel.
- mlx.lineJoin=miter property is used to set the sharp corner, when two lines meet.
- mlx.miterLimit=7 is used to set the maximum miter length
- The moveTo() method is used to set the starting point at (30,10)in x ,y axis.
- the lineTo() method is used to set the ending point at(150,75) in x, y direction.
- The lineTo() method is used to set the ending point to starting point at (15,100) in x, y direction.
- The stroke() method is used to display the graphics.
Sample Output for miterLimit property in HTML5 Canvas:
- The canvas rectangle with red color border.
- Draw a rectangle with a line width of 15 pixels.
Browser Support for miterLimit property in HTML5 Canvas:
Tips and Notes
- The miterLimit property works only if the lineJoin property is "miter"
Related Searches to miterLimit Property in HTML5 Canvas
ctx stroke width