How to use HTML5 Canvas line Join

This article describe about HTML5 Canvas line Join.
  • 2524

HTML5 canvas Line Join

HTML5 canvas line Join is use line Join context property.

It is use three line joins: miter, round or bevel.  

The HTML5 Canvas line join property is defaulted with the miter style.

Syntax

<script>
      context.lineJoin = 'round';
</script>

Example

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body

{

        margin: 0px;

        padding: 0px;

      }

      #myCanvas

{

        border: 1px solid #9C9898;

      }

    </style>

    <script>

        window.onload = function ()

{

            var canvas = document.getElementById("myCanvas");

            var context = canvas.getContext("2d");

 

            // set line width for all lines

            context.lineWidth = 25;

 

            // miter line join (left)

            context.beginline Join();

            context.moveTo(99, 150);

            context.lineTo(149, 50);

            context.lineTo(199, 150);

            context.lineJoin = "miter";

            context.strokeStyle = "red";

            context.stroke();

 

            // round line join (middle)

            context.beginline Join();

            context.moveTo(239, 150);

            context.lineTo(289, 50);

            context.lineTo(339, 150);

            context.lineJoin = "round";

            context.strokeStyle = "blue";

            context.stroke();

 

            // bevel line join (right)

            context.beginline Join();

            context.moveTo(379, 150);

            context.lineTo(429, 50);

            context.lineTo(479, 150);

            context.lineJoin = "bevel";

            context.strokeStyle = "orange";

            context.stroke();

        };

 

    </script>

  </head>

  <body>

    <canvas id="myCanvas" width="578" height="200"></canvas>

  </body>

</html>

 

Output

Line Join.jpg

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2019 DotNetHeaven. All rights reserved.