YouTip

# HTML Canvas lineJoin Property The `lineJoin` property of the Canvas 2D API determines the shape used to join two line segments where they meet. By default, when two lines intersect, the corner formed is sharp and pointed. Using the `lineJoin` property, you can easily round off these corners or bevel them to match your design requirements. --- ## Browser Support The `lineJoin` property is widely supported across all modern web browsers: * Google Chrome * Mozilla Firefox * Safari * Opera * Microsoft Edge / Internet Explorer 9+ *Note: Internet Explorer 8 and earlier versions do not support the `` element.* --- ## Definition and Usage The `lineJoin` property sets or returns the type of corner created when two paths or line segments intersect. ### Syntax ```javascript context.lineJoin = "bevel|round|miter"; ``` ### Property Values | Value | Description | | :--- | :--- | | **`miter`** | **Default**. Creates a sharp, pointed corner where the outer edges of the lines are extended until they meet. | | **`round`** | Creates a rounded corner by filling the joint with a circular arc centered at the intersection point. | | **`bevel`** | Creates a flat, squared-off corner by cutting off the sharp point with a straight line. | --- ## Code Examples ### 1. Creating a Rounded Corner (`round`) This example demonstrates how to join two lines with a smooth, rounded corner. ```html Your browser does not support the HTML5 canvas tag. ``` ### 2. Comparing All Three Join Styles To better understand the differences, here is how you can draw three paths side-by-side using `miter`, `round`, and `bevel`: ```javascript const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.lineWidth = 15; const joins = ['miter', 'round', 'bevel']; joins.forEach((joinType, index) => { ctx.lineJoin = joinType; ctx.beginPath(); // Offset each path horizontally const xOffset = index * 80; ctx.moveTo(40 + xOffset, 20); ctx.lineTo(100 + xOffset, 60); ctx.lineTo(40 + xOffset, 100); ctx.stroke(); }); ``` --- ## Important Considerations ### The `miterLimit` Property When using the default `"miter"` value, if the angle between the two intersecting lines is very sharp, the miter (the pointed tip) can extend extremely far outward. To prevent this spike from becoming disproportionately long, you can use the **`miterLimit`** property. If the miter length exceeds the `miterLimit` value, the corner will automatically fallback and be rendered as a **`bevel`** instead.