Open In App

HTML canvas miterLimit Property

Last Updated : 19 Jun, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The miterLimit property is used to or returns the maximum miter length. It is used to prevent the miter length from being too long. The miter length is the distance between the inner corner and the outer corner where two lines meet. 

Syntax:

context.miterLimit = number;

Property Values:

  • number: It is a positive number that shows the maximum miter length.

Example: 

html




<!DOCTYPE html>
<html>
 
<body>
    <center>
        <h1 style="color:green"> GeeksforGeeks </h1>
        <h3>Canvas miterLimit Property</h3>
        <canvas id="gfgCanvas"
                width="400"
                height="200"
                style="border:2px solid ">
        </canvas>
 
        <script>
            let gfg = document.getElementById("gfgCanvas");
            let context = gfg.getContext("2d");
            context.lineWidth = 10;
            context.lineJoin = "miter";
            context.miterLimit = 5;
            context.moveTo(80, 80);
            context.lineTo(200, 108);
            context.lineTo(80, 136);
            context.stroke();
        </script>
    </center>
 
</body>
   
</html>


Output:

  

Supported Browsers: The browsers supported by HTML canvas miterLimit Property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera

Previous Article
Next Article

Similar Reads

CSS | stroke-miterlimit Property
The stroke-miterlimit property is used to represent the limit on the ratio of the miter length to the stroke-width, that is used to draw a miter join. This property is used in situations when the miter extends beyond the thickness of the line. If this limit specified is exceeded, the 'miter' type of the join is converted to 'bevel'. This will crop
2 min read
HTML canvas lineWidth Property
The HTML canvas lineWidth property is used to set or return the width of the line (thickness of the line). The width of the line is set in terms of pixels. The default value of this property is 1. Syntax: context.lineWidth = number; Property Values: number: This property value indicates the number which specifies the line width in terms of pixels.
2 min read
HTML canvas textAlign Property
The HTML canvas textAlign Property is used to set or return the current alignment for text content, according to the anchor point. Basically, the text will start at that position and the text will end at that specified position. Syntax: context.textAlign="center | end | left | right | start"; Property Values: start: It has a Default. The text start
2 min read
HTML canvas font Property
The HTML canvas font Property is used to change the present font family of the Text content of the &lt;canvas&gt; element. The font Property has a Default Property i.e 10px sans-serif Syntax: context.font="italic small-caps bold 12px arial"; Property Values: font-family: It is used to set the font type of an HTML element. It holds several font name
2 min read
HTML canvas lineJoin Property
The HTML canvas lineJoin property is used to set or return the type of corner created, when two lines meet, by using the lineJoin property. The type of join can have one of three styles: bevel, round, or miter. However, the join style has generally miter style. Syntax: context.lineJoin = "bevel|round|miter"; Property Values: miter: It is the defaul
2 min read
HTML canvas shadowColor Property
The Canvas shadowColor property is used to set or returns the color that is used for shadows. The fillStyle property is used to create shadows. This property can be set to a string representing a CSS color value, which we want as shadow color. By default, shadow color is set to black (CSS color value #000000). Syntax:: context.shadowColor = color;
2 min read
HTML canvas fillStyle Property
The canvas fillStyle property is used to set or return the color, gradient, or pattern used to fill the drawing. Style: context.fillStyle=color|gradient|pattern; Property Value: color: It is used to set the filled color of the drawing. The default value of the canvas fillStyle property is black.gradient: It is used to set the gradient object to fil
2 min read
HTML canvas strokeStyle Property
The canvas strokeStyle property is used to set or return the stroke of color, gradient, or pattern used in the drawing. Syntax: context.strokeStyle=color|gradient|pattern; Property Value: color: It is used to set the filled color of drawing. The default value of canvas fillStyle property is black.gradient: It is used to set the gradient object to f
2 min read
HTML canvas shadowBlur Property
The canvas shadowBlur property is used to set or return the blur level for shadows. Syntax: context.shadowBlur=number Property: number: It is used to set the blur level for the shadow. Example 1: C/C++ Code &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt; HTML canvas shadowBlur Property &amp;lt;/title
1 min read
HTML canvas shadowOffsetX Property
The canvas shadowOffsetX property is used to set or return the horizontal distance of the shadow from the shape. This property holds a positive or negative value where a positive value indicates the shadow to the right and negative value indicates the shadow to the left. Syntax: context.shadowOffsetX=number Property Values: number: It is used to se
1 min read