Open In App

HTML canvas lineJoin Property

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

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 default style. This value is used to design a sharp corner.
  • bevel: This design is used to create beveled corner.
  • round: This design is used to create rounded corner.

Example 1: This example illustrates the miter linejoin property.




<!DOCTYPE html>
<html>
  
<head
    <title
        HTML canvas lineJoin property
    </title
</head
  
<body style="text-align:center;">
      
    <h1 style="color:green"
        GeeksforGeeks 
    </h1
      
    <h2
        HTML canvas lineJoin property
    </h2
      
    <canvas id="canvas" width="350" height="380"></canvas>
      
    <script>
        var can = document.getElementById("canvas");
        var context = can.getContext("2d");
        context.beginPath();
        context.lineWidth = 20;
        context.lineJoin = "miter";
        context.moveTo(80, 250);
        context.lineTo(150, 50);
        context.lineTo(250, 240);
        context.strokeStyle ="green";
        context.stroke();
    </script>
</body>
  
</html>                    


Output:

Example 2: This example illustrates the bevel linejoin property.




<!DOCTYPE html>
<html>
  
<head
    <title
        HTML canvas lineJoin property
    </title
</head
  
<body style="text-align:center;">
      
    <h1 style="color:green"
        GeeksforGeeks 
    </h1
      
    <h2
        HTML canvas lineJoin property
    </h2
      
    <canvas id="canvas" width="350" height="380"></canvas>
      
    <script>
        var can = document.getElementById("canvas");
        var context = can.getContext("2d");
        context.beginPath();
        context.lineWidth = 20;
        context.lineJoin = "bevel";
        context.moveTo(80, 250);
        context.lineTo(150, 50);
        context.lineTo(250, 240);
        context.strokeStyle ="green";
        context.stroke();
    </script>
</body>
  
</html>                    


Output:

Example 3: This example illustrates the round linejoin property.




<!DOCTYPE html>
<html>
  
<head
    <title
        HTML canvas lineJoin property
    </title
</head
  
<body style="text-align:center;">
      
    <h1 style="color:green"
        GeeksforGeeks 
    </h1
      
    <h2
        HTML canvas lineJoin property
    </h2
      
    <canvas id="canvas" width="350" height="380"></canvas>
      
    <script>
        var can = document.getElementById("canvas");
        var context = can.getContext("2d");
        context.beginPath();
        context.lineWidth = 20;
        context.lineJoin = "round";
        context.moveTo(80, 250);
        context.lineTo(150, 50);
        context.lineTo(250, 240);
        context.strokeStyle ="green";
        context.stroke();
    </script>
</body>
  
</html>                    


Output:

Supported Browsers: The browser supported by HTML canvas lineJoin property are listed below:

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


Previous Article
Next Article

Similar Reads

CSS | stroke-linejoin Property
The stroke-linejoin property is an inbuilt property used to define the shape that is used to end an open sub-path of a stroke. Syntax: stroke-linejoin: miter | miter-clip | round | bevel | arcs | initial | inherit Property Values: miter: It is used to indicate that a sharp corner would be used to join the two ends. The outer edges of the stroke are
4 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 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
HTML canvas lineCap Property
The canvas lineCap property is used to set or return the style of end caps of line. The line can have one of three cap styles: butt, round, or square. The default value of canvas lineCap property are butt. The lineCap property must be set before calling the stroke() function. Syntax: context.lineCap = "butt|round|square"; Property Values: butt: It
2 min read