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



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


Lets take an example

Now we have to add





        window.onload = function ()


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

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

            // round line cap


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

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

            context.lineWidth = 30;

            context.strokeStyle = "#00ff11";

            context.lineCap = "round";







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






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.