html tutorial - miterLimit Property in HTML5 Canvas - html5 - html code - html form




Miterlimit property in html5 canvas

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.
  • linewidth property in HTML5 canvas Code Explanation
  • 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:

context.miterLimit=number; 

Property Values of miterLimit property in HTML5 Canvas:

Value Description
number Defines the maximum miter length.

Sample Coding for miterLimit property in HTML5 Canvas:

Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy HTML Canvas miterLimit Property </title>
    </head>
    <body>
        <h1>Wikitechy HTML Canvas miterLimit Property </h1>
        <canvas id="wikitechyCanvas" width="200" height="150"
                style="border:1px solid blue;">
        </canvas>
        <script>
            var ml = document.getElementById("wikitechyCanvas");
            var mlx = ml.getContext("2d");
            mlx.lineWidth = 10;
            mlx.lineJoin = "miter";
            mlx.miterLimit = 7;
            mlx.moveTo(30, 10);
            mlx.lineTo(150, 75);
            mlx.lineTo(15, 100);   
            mlx.stroke();
        </script>
    </body>
</html>

Code Explanation for miterLimit property in HTML5 Canvas:

miterlimit property in HTML5 canvas Code Explanation

  1. “wikitechyCanvas” is used to declare the id value of the canvas tag.
  2. The getElementById(); method is used to get the canvas element with the specific id (“wikitechyCanvas”).
  3. ml.getContext(“2d”)a method is returns a two-dimensional drawing context on the canvas.
  4. mlx.lineWidth=10 is used to draw a line with a width of 10 pixel.
  5. mlx.lineJoin=miter property is used to set the sharp corner, when two lines meet.
  6. mlx.miterLimit=7 is used to set the maximum miter length
  7. The moveTo() method is used to set the starting point at (30,10)in x ,y axis.
  8. the lineTo() method is used to set the ending point at(150,75) in x, y direction.
  9. The lineTo() method is used to set the ending point to starting point at (15,100) in x, y direction.
  10. The stroke() method is used to display the graphics.

Sample Output for miterLimit property in HTML5 Canvas:

miterlimit property in HTML5 canvas Output

  1. The canvas rectangle with red color border.
  2. Draw a rectangle with a line width of 15 pixels.

Browser Support for miterLimit property in HTML5 Canvas:

Yes 9.0 Yes Yes Yes

Tips and Notes

  • The miterLimit property works only if the lineJoin property is "miter"

Related Searches to miterLimit Property in HTML5 Canvas

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×