How to Add a Cap to HTML5 Canvas Line

In this article I have described about the way to add cap in HTML5 canvas line with the help of example.
  • 2128

Canvas Line cap in HTML5

In HTML5 canvas element have some interesting property which decide the shape of a canvas line i.e. "linecap" property.
The main aim of this property is to add cap to canvas line.
Usually there are three type of cap style of canvas line in HTML5

  • Butt cap
  • Round cap
  • Square cap

Syntax

<script>

  context.lineCap = 'round/butt/square';

</script>

Lets take an example

Now we have to add

<!DOCTYPE HTML>

<html>

  <head>

    <script>

        window.onload = function ()

        {

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

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

            // round line cap

            context.beginPath();

            context.moveTo(200, canvas.height / 2);

            context.lineTo(canvas.width - 200, canvas.height / 2);

            context.lineWidth = 30;

            context.strokeStyle = "#00ff11";

            context.lineCap = "round";

            context.stroke();

        };

 

    </script>

  </head>

  <body>

    <canvas id="caplineCanvas" width="600" height="200"></canvas>

  </body>

</html>

 

OUTPUT


capline.jpg

You may also want to read these related articles :

Ask Your Question 

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

Programming Answers here

© 2020 DotNetHeaven. All rights reserved.